simple fading slide show

Written by @kerixa 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 https://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='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300