how to make a slideshow repeat using javascript
ok my slideshow is my body background and the imgs are in img tags like this
<img name="pic" src="../../Content/images/bg.jpg" style=" width: 100%; position: absolute; top: 0; left: 0; z-index: -1;width: expression(document.body.clientWidth + 'px'); " alt=""/>
my problem is it plays but then stops on the last image instead of being continuous
also how would i implement a stop play prev next button a the top of the page that also controls the background i dont want to download no plugins if possible thanks
here is my code so far
var pause = 3000;
var n = 0;
var imgs = new Array("bg.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg", "bg6.jpg", "bg7.jpg", "bg8.jpg", "bg9.jpg", "bg10.jpg", "bg11.jpg");
var preload = new Array();
for (var i = 1; i < imgs.length; i++ ) {
preload[i] = new Image();
preload[i].src = imgs[i];
}
var inc开发者_如何学运维 = -1
function rotate() {
document.images.pic.src = imgs[n];
(n == (imgs.length - 1)) ? n = 0 : n++;
setTimeout("rotate(0)", pause);
}
Possibly this?
n = ( n==imgs.length-1 ? 0 : n+1);
Try structuring your code like this:
var i, imgs, pic;
function rotate()
{
pic.src = imgs[i] ;
(i === (imgs.length -1) ) ? i=0 : i++ ;
setTimeout( rotate, 5000 );
}
function init()
{
pic = document.getElementById("pic");
imgs = ["bg.jpg", "bg2.jpg", "bg3.jpg"] ;
var preload= new Array();
for( i=0; i< imgs.length; i++ )
{
preload[ i ] = new Image();
preload[ i ].src = imgs[ i ];
}
i=0;
rotate();
}
onload=init;
And in your html page you could have something like this:
<img id="pic" width="960" height="300" alt="Icon" src="bg1.jpg">
精彩评论