0

こんにちは、プロトタイプ スライダーのコードを使用していますが、コードが機能していません。私の最初の画像は、最初の画像スライドよりも 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>

私は最善を尽くしますが、なぜそれが起こるのかわかりません。

4

1 に答える 1

0

各行をデバッグした後、最初のループでcssのdisplay:noneプロパティを使用してすべての下位要素を非表示にすることがわかりました。最初以外のすべての要素にdispaly:noneを追加した後、最初のループで要素が自動的に変更されます。他の要素は、最初の要素を除いて、スライダー効果のために何も表示されないようにする必要があります。ありがとう

于 2012-12-20T07:30:56.743 に答える