ASP.NET应用程序中的图像旋转器 [英] Image Rotator in ASP.NET application
本文介绍了ASP.NET应用程序中的图像旋转器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
朋友们，
我正在寻找更好的建议来在我的asp.net Web应用程序之一中实现图像旋转器功能.我有一个使用jquery的解决方案，它工作正常( http://www.xdevsoftware.com/blog/post/jquery-Image-Rotator-for-ASPNET.aspx#comment ).任何人都可以让我们知道我是否可以使用任何其他控件来使用相同的功能. >
如果有人已经使用过此代码，请告诉我它的优缺点.
我可以使用AnimationExtender(Ajaxtoolkit控件)来实现此功能.您能否让我知道哪一个更好.在我的情况下，性能非常重要.
问候，
Rajesh
Hi friends,
I am searching a better obtion to implement image rotator functionality in one of my asp.net web application. I got one solution using jquery and it is working fine(http://www.xdevsoftware.com/blog/post/jquery-Image-Rotator-for-ASPNET.aspx#comment).Could anyone please let us know if i can use any other control to use same functionality.
If anyone already used this code, could you please let me know pros and cons of that.
Can i use AnimationExtender (Ajaxtoolkit control) to implement this functionality. Could you please let me know which one will be better. Performance is much important in my case.
Regards,
Rajesh
推荐答案
Hiiii
< code>< pre lang ="xml">在JavaScript中创建图像旋转器的方法有很多.我写了两个简单的示例在JavaScript中创建图像旋转器.
我的第一个程序:
步骤1:首先，我们在& lt; img& gt;的帮助下创建一个图片(img1).标签.并将其放在& lt; body& gt;标签:-& gt;
& lt; body onload =& quot; show()& quot;& gt;
& lt; img id =& quot; img1& quot; width =&"120px&" /& gt;
& lt//body& gt;
注意:这里我们在onload事件上调用js函数(show()).
步骤2:在& lt; head& gt;中创建一个javascript函数(show()).标签:-& gt;
& lt; script language =' javascript'& gt;
函数show()
{
document.getElementById(' img1').src =&水百合.jpg& quot ;;
setTimeout(& quot; show2()& quot; 1000);
}
函数show2()
{
document.getElementById(' img1').src =& quot; Winter.jpg& quot ;;
setTimeout(& quot; show3()& quot;，1000);
}
函数show3()
{
document.getElementById(' img1').src =& quot; Sunset.jpg& quot ;;
setTimeout(& quot; show4()& quot; 1000);
}
函数show4()
{
document.getElementById(' img1').src =& quot; Blue hills.jpg& quot ;;
setTimeout(& quot; show()& quot;，1000);
}
& lt//script& gt;
在这里，我们借助getElementById获得了图像(img1)的ID(getElementById()方法访问具有指定ID的元素).
并设置img1的源(src).在这里，我们创建了许多函数，并借助javascript的setTimeout方法进行调用.
我的第二个程序:
在这里，我们根据特定表格文本的onmouseover事件设置图像，并根据图像设置图像和那里的描述.
步骤1:首先，我们在& lt; body& gt;中创建一个表格标签并设置图片(img1)和多个< p& gt;表格行中的标签:-& gt;
& lt;表格样式=& quot;边框:1像素纯黑色& gt;
& lt; tr& gt;
& lt; td& gt;
& lt; table& gt;
& lt; tr& gt;
& lt; td& gt;
& lt; img id =& quot; img1& quot; src =& quot; Sunset.jpg& quot; width =&"120px&" /& gt;
& lt//td& gt;
& lt//tr& gt;
& lt; tr& gt;
& lt; td& gt;
< p id =&"pmain&"& gt; & lt//p& gt;
& lt//td& gt;
& lt//tr& gt;
& lt//table& gt;
& lt//td& gt;
& lt; td& gt;
& lt;表格样式=& quot;宽度:140px& quot;& gt;
& lt; tr& gt;
< td id =& quot; td1& quot; align =&"center&" style =&"border:1px实心黑色& quot; onmouseover =& quot; show1()& quot; onmouseout =&"hide1()&"<
& lt; p id =& quot; p1& quot;" Image1</p& gt;
& lt//td& gt;
& lt//tr& gt;
& lt; tr& gt;
< td id =& quot; td2& quot; align =&"center&" style =&"border:1px实心黑色& quot; onmouseover =& quot; show2()& quot; onmouseout =&"hide2()&"<
& lt; p id =& quot; p2& quot; Image2</p& gt;
& lt//td& gt;
& lt//tr& gt;
& lt; tr& gt;
< td id =& quot; td3& quot; align =&"center&" style =&"border:1px实心黑色& quot; onmouseover =& quot; show3()& quot; onmouseout =&"hide3()&"<
& lt; p id =& quot; p3& quot; Image3</p& gt;
& lt//td& gt;
& lt//tr& gt;
& lt; tr& gt;
< td id =& quot; td4& quot; align =&"center&" style =&"border:1px实心黑色& quot; onmouseover =& quot; show4()& quot; onmouseout =&"hide4()&"<
& lt; p id =& quot; p4& quot;" Image4</p& gt;
& lt//td& gt;
& lt//tr& gt;
& lt//table& gt;
& lt//td& gt;
& lt//tr& gt;
& lt//table& gt;
在这里，我们在onmouseover和onmouseout事件上设置样式和调用函数.
步骤2:在& lt; head& gt;中创建javascript函数.标签:-& gt;
& lt; script language =' javascript'& gt;
函数show1()
{
document.getElementById(' img1').src =& quot; Winter.jpg& quot ;;
document.getElementById(& quot; p1& quot;).style.fontStyle =& quot;斜体& quot ;;
document.getElementById(& quot; td1& quot;).style.background =& quot;红色& quot ;;
document.getElementById(&"pmain& quot;).innerHTML =& quot; Image1& quot ;;
}
函数hide1()
{
document.getElementById(& quot; p1& quot;).style.fontStyle =& quot;普通& quot ;;
document.getElementById(& quot; td1& quot;).style.background =& quot; White& quot ;;
document.getElementById(&"pmain&").innerHTML =&&";
}
函数show2()
{
document.getElementById(' img1').src =& quot; Sunset.jpg& quot ;;
document.getElementById(& quot; p2& quot;).style.fontStyle =& quot;斜体& quot ;;
document.getElementById(& quot; td2& quot;).style.background =& quot;红色& quot ;;
document.getElementById(&"pmain&").innerHTML =& quot; Image2& quot ;;
}
函数hide2()
{
document.getElementById(& quot; p2& quot;).style.fontStyle =& quot;普通& quot ;;
document.getElementById(& quot; td2& quot;).style.background =& quot; White& quot ;;
document.getElementById(&"pmain&").innerHTML =&&";
}
函数show3()
{
document.getElementById(' img1').src =&水百合.jpg& quot ;;
document.getElementById(& quot; p3& quot;).style.fontStyle =& quot;斜体& quot ;;
document.getElementById(& quot; td3& quot;).style.background =& quot;红色& quot ;;
document.getElementById(&"pmain&").innerHTML =& quot; Image3& quot ;;
}
函数hide3()
{
document.getElementById(& quot; p3& quot;).style.fontStyle =& quot;普通& quot ;;
document.getElementById(& quot; td3& quot;).style.background =& quot; White& quot ;;
document.getElementById(&"pmain&").innerHTML =&&";
}
函数show4()
{
document.getElementById(' img1').src =& quot; Blue hills.jpg& quot ;;
document.getElementById(& quot; p4& quot;).style.fontStyle =& quot;斜体& quot ;;
document.getElementById(& quot; td4& quot;).style.background =& quot;红色& quot ;;
document.getElementById(&"pmain& quot;).innerHTML =& quot; Image4& quot ;;
}
函数hide4()
{
document.getElementById(& quot; p4& quot;).style.fontStyle =& quot;普通& quot ;;
document.getElementById(& quot; td4& quot;).style.background =& quot; White& quot ;;
document.getElementById(&"pmain&").innerHTML =&&";
}
& lt//script& gt;
在这里，我们借助id设置image(img1)的src属性，并设置< td& gt;的样式.和& lt; p& gt;标签和& lt; p& gt;的innerHTML属性标签，它是基于Id的标记.在这里，我们借助getElementById获得ID(getElementById()方法访问具有指定ID的元素).</pre></code>
Hiiii
<code><pre lang="xml">There are many ways to create Image Rotator in JavaScript .I write two simple examples to create an Image rotator in JavaScript.
My first Program:
Step 1: First we create an image(img1) with the help of <img> tag. and place it in the <body> tag:->
<body onload="show()">
<img id="img1" width="120px" />
</body>
Note: Here we call a js function(show()) on the onload event.
Step 2: Create a javascript function(show()) in the <head> tag:->
<script language='javascript'>
function show()
{
document.getElementById('img1').src="Water lilies.jpg";
setTimeout("show2()",1000);
}
function show2()
{
document.getElementById('img1').src="Winter.jpg";
setTimeout("show3()",1000);
}
function show3()
{
document.getElementById('img1').src="Sunset.jpg";
setTimeout("show4()",1000);
}
function show4()
{
document.getElementById('img1').src="Blue hills.jpg";
setTimeout("show()",1000);
}
</script>
Here we get the Id of the image(img1) with the help of getElementById (The getElementById() method accesses the element with the specified id).
and sets the source(src) of the img1. Here we create many functions and call it with the help of setTimeout Method of javascript.
My second Program:
Here we sets the imge on the basis of the onmouseover event of the particular Table's Text and sets the image and there description on the basis of it.
Step 1: First We create a table in the <body> tag and sets an image(img1) and multiple <p> tags in the table rows:->
<table style="border:1px solid Black">
<tr>
<td>
<table>
<tr>
<td>
<img id="img1" src="Sunset.jpg" width="120px" />
</td>
</tr>
<tr>
<td>
<p id="pmain"> </p>
</td>
</tr>
</table>
</td>
<td>
<table style="width:140px">
<tr>
<td id="td1" align="center" style="border:1px solid Black" onmouseover="show1()" onmouseout="hide1()">
<p id="p1">Image1</p>
</td>
</tr>
<tr>
<td id="td2" align="center" style="border:1px solid Black" onmouseover="show2()" onmouseout="hide2()">
<p id="p2">Image2</p>
</td>
</tr>
<tr>
<td id="td3" align="center" style="border:1px solid Black" onmouseover="show3()" onmouseout="hide3()">
<p id="p3">Image3</p>
</td>
</tr>
<tr>
<td id="td4" align="center" style="border:1px solid Black" onmouseover="show4()" onmouseout="hide4()">
<p id="p4">Image4</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here we set the style and call functions on the onmouseover and onmouseout event.
Step 2: Create javascript functions in the <head> tag:->
<script language='javascript'>
function show1()
{
document.getElementById('img1').src="Winter.jpg";
document.getElementById("p1").style.fontStyle="italic";
document.getElementById("td1").style.background="Red";
document.getElementById("pmain").innerHTML="Image1";
}
function hide1()
{
document.getElementById("p1").style.fontStyle="normal";
document.getElementById("td1").style.background="White";
document.getElementById("pmain").innerHTML="";
}
function show2()
{
document.getElementById('img1').src="Sunset.jpg";
document.getElementById("p2").style.fontStyle="italic";
document.getElementById("td2").style.background="Red";
document.getElementById("pmain").innerHTML="Image2";
}
function hide2()
{
document.getElementById("p2").style.fontStyle="normal";
document.getElementById("td2").style.background="White";
document.getElementById("pmain").innerHTML="";
}
function show3()
{
document.getElementById('img1').src="Water lilies.jpg";
document.getElementById("p3").style.fontStyle="italic";
document.getElementById("td3").style.background="Red";
document.getElementById("pmain").innerHTML="Image3";
}
function hide3()
{
document.getElementById("p3").style.fontStyle="normal";
document.getElementById("td3").style.background="White";
document.getElementById("pmain").innerHTML="";
}
function show4()
{
document.getElementById('img1').src="Blue hills.jpg";
document.getElementById("p4").style.fontStyle="italic";
document.getElementById("td4").style.background="Red";
document.getElementById("pmain").innerHTML="Image4";
}
function hide4()
{
document.getElementById("p4").style.fontStyle="normal";
document.getElementById("td4").style.background="White";
document.getElementById("pmain").innerHTML="";
}
</script>
Here we sets the src property of image(img1) with the help of id and sets the style of <td> and <p> tags and the innerHTML property of <p> tag on the basic of Id .Here we get the Id with the help of getElementById (The getElementById() method accesses the element with the specified id).</pre></code>
这篇关于ASP.NET应用程序中的图像旋转器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
