嗨,我为原型滑块使用了一些代码,但代码不起作用。我的第一个图像第一次执行总没有比其他图像开始滑动。如果有 3 个图像比第一个图像滑动 3 次并且滑块开始工作. 这是我的代码:
var i = 0;
var j=0;
var time = '';
var delay ='';
var item_id ='';
var child;
var image_slide = [];
var NumOfImages;
var wait = 2000;
var container = document.getElementById("image-container");
for (child = container.firstChild; child; child = child.nextSibling) {
if (child.id && child.nodeName === "DIV") {
image_slide.push(child.id);
}
}
var NumOfImages = image_slide.length;
function SwapImage(x,y) {
console.log(x);
$(image_slide[x]).appear({ duration: 1.5 });
$(image_slide[y]).fade({duration: 1.5});
}
function StartSlideShow() {
play = setInterval('Play()',wait);
}
function Play() {
var imageShow, imageHide;
imageShow = i+1;
imageHide = i;
if (imageShow == NumOfImages) {
SwapImage(0,imageHide);
i = 0;
} else {
SwapImage(i+1,imageHide);
i++;
}
}
function Stop () {
clearInterval(play);
}.
这是我的html
<div id="image-container" class="protoshow" onmouseover="javascript:StartSlideShow();" onmouseout="javascript:Stop();">
<div class="fade-box" id="image-1"><img src="slide01.jpg" alt="" /></div>
<div class="fade-box" id="image-2"><img src="slide01.jpg" alt="" /></div>
<div class="fade-box" id="image-3"><img src="slide01.jpg" alt="" /></div>
<div class="fade-box" id="image-4"><img ssrc="slide01.jpg" alt="" /></div>
</div>
我尽力而为,但不知道为什么会发生。在此先感谢