simple fading slide show
Written by 24 February 2014
You can use the slider to make your website more beautiful. Slider is one of the cases that in addition to displaying photos in a row, it is possible to write text on it and change the photos with effects. This slider can usually be used to show gallery images or display photos of the latest news or the company achievements. In the following code, 4 images are displayed by a slider, each image is zoomed in a bit at a slow speed, and the fade animation is used to display the next slide. This means that the current image disappears and the next image is displayed gradually. This is a looping slider and displays the first slide again after displaying the fourth slide.
Code Snippet:
<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.htmlbestcodes.com/images/toad.jpg'
Pic[1] = 'http://www.htmlbestcodes.com/images/lizard.jpg'
Pic[2] = 'http://www.htmlbestcodes.com/images/chameleon.jpg'
Pic[3] = 'http://www.htmlbestcodes.com/images/gecko.jpg'
// do not edit anything below this line
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);
}
window.onload=runSlideShow;
// End -->
</script>
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=190 width=330>
<img src="http://www.htmlbestcodes.com/images/toad.jpg" name='SlideShow' width=330 height=190>
</td>
</tr>
</table>
</center>
<br/><div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!