Image Rotator in ASP.NET application

Question

0.00/5 (No votes)

See more:

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

Posted 3-Oct-10 20:36pm

rajesh_t

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

mahakgupta · Answer 1 · 2010-10-13T16:13:00

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>