Question

嗨我使用了一段代码用于原型滑块，但代码无法正常工作。我的第一张图片是第一次执行，总数为no，而不是其他图像开始滑动。如果有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>

我尽我所能，但不知道为什么会发生。谢谢提前

Answer 1

在调试每一行之后，我发现在第一个循环中它隐藏了所有下层元素，显示：css的display属性。在向第一个循环以外的每个元素添加dispaly：none之后，它将自动更改第一个循环上的元素。所以在工作时使用自定义滑块除了第一个滑块效果之外，其他元素必须不显示。感谢

滑块在原型中无法正常工作

1 个答案: