Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

FREE 12 month online training for ASP.NET & MS Expression Studio and a Free copy of MS Expression Web with Windows Server Purchase
Creating a Slide Show Images in a Web Page

Author: DevASP
Download Source Code : 535_Slideshow.zip

This article is about how you can create fading effects in images that are being used in your web page. Often you have seen on many sites that an image appear for some while and fade out and a new images.

Steps you will do.

 

Start visual studio and create a new web application.

 

Copy and paste the image that you want to include in the rotation to you project root directory of in a folder in the project.  But you will have to give the correct path if the images are in a folder.

 

Open the HTML design of your web page and before closing the head tag add the following JavaScript tag and functions.

 

NOTE. You can also set the slide show speed, cross fade duration.

 

var slideShowSpeed = 5000

 

var crossFadeDuration = 3

 

var Pic = new Array()

 

Pic[0] = 'Blue hills.jpg'

 

Pic[1] = 'Sunset.jpg'

 

Pic[2] = 'Winter.jpg'

 

Pic[3] = 'Water lilies.jpg'

 

Pic[4] = 'Winter.jpg'

 

 

var t

 

var j = 0

 

var p = Pic.length

 

 

 

var preLoad = new Array()

 

for (i = 0; i < p; i++){

 

preLoad[i] = new Image()

preLoad[i].src = Pic[i]

 

}

 

 

 

function runSlideShow(){

 

   if (document.all){

 

      document.images.SlideShow.style.filter="blendTrans(duration=2)"

 

      document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"

 

      document.images.SlideShow.filters.blendTrans.Apply()     

 

   }

 

   document.images.SlideShow.src = preLoad[j].src

 

   if (document.all){

 

      document.images.SlideShow.filters.blendTrans.Play()

 

   }

 

   j = j + 1

 

   if (j > (p-1)) j=0

 

   t = setTimeout('runSlideShow()', slideShowSpeed)

 

}

 

 

 

 

Now add the following HTML code to design and call thee above JavaScript functions.

 

 <body onload="runslideshow()">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td id="vu" height=150 width=150>

<img src="winter.jpg" name='slideshow' width=150 height=150></td>

</tr>

</table>

<center>

<h4>dont forget to visit www.devasp.com</h4>

<a href="http://www.devasp.com">devasp team</a>

<center>

</body> 

 

Run your application and see the rotating images.

Article Comments
this is good article

Posted on 8/19/2006 10:17:52 AM by sk.mohdrafee

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< Change Your Background Color of Web Page Using JavaScript

Disclaimer - Privacy
© 2002-2012 DevASP.net