1

基本的に、jqueryを使用してスライドショーを作成しようとしています。ここでは、スライドショーのナビゲーションは正常に機能していますが、スライドショーのループは機能していません。
私はここで私のjsfiddle
を試しました。 私のスクリプトは次のとおりです。

 var currIndex = -1;

 function slideshow(slideshowId){
     var len=$("ul#"+slideshowId+" li.slides").length;
     currIndex = (currIndex + 1) % len;
     $("ul#"+slideshowId+" li.slides").hide();
     $("ul#"+slideshowId+" li.slide"+currIndex+"").fadeIn();     
 }

 function slidepagenation(slideshowId,slideno){    
        $("ul#"+slideshowId+" li.slides").hide();
        $("ul#"+slideshowId+" li.slide"+slideno+"").fadeIn();
        currIndex = slideno;
 }

var tshone = 0;
var tshtwo = 0;

    slideshow('slideshow-one');
    tshone =setInterval(slideshow('slideshow-one'), 500);
     slideshow('slideshow-two');
    tshtwo =setInterval(slideshow('slideshow-two'), 500);

    $('ul.slideshow-one li a').click(function(){
        clearInterval(tshone);
        var element = $(this);
        var slideshowid=element.parent().parent().attr('class');
        var slideno = $("ul.slideshow-one li a").index($(this));
        slidepagenation(slideshowid,slideno); 
    });

    $('ul.slideshow-two li a').click(function(){
        clearInterval(tshtwo);
        var element = $(this);
        var slideshowid=element.parent().parent().attr('class');
        var slideno = $("ul.slideshow-two li a").index($(this));
        slidepagenation(slideshowid,slideno); 
    });

私のhtmlはここにあります:

<ul class="slideshow" id="slideshow-one">
    <li class="slides slide0" style="display:block">
    Slide one
    </li>
    <li class="slides slide1">
    Slide two
    </li>
    <li class="slides slide2">
    Slide three
    </li>     
</ul>
<div class="full-length clearfix txt-center">
<ul class="slideshow-one">
    <li><a>1</a></li>
    <li><a>2</a></li> 
    <li><a>3</a></li>     
</ul>
</div>
<br><br>
<ul class="slideshow" id="slideshow-two">
    <li class="slides slide0" style="display:block">
    Slide one
    </li>
    <li class="slides slide1">
    Slide two
    </li>    
</ul>
<div class="full-length clearfix txt-center">
<ul class="slideshow-two">
    <li><a>1</a></li>
    <li><a>2</a></li>    
</ul>
</div>

</p>

4

1 に答える 1

1

setInterval間隔で実行する関数を受け入れますが、あなたはそれを与えていますundefined

tshone =setInterval(slideshow('slideshow-one'), 500);

...その行が呼び出し slideshowて戻り値をに渡すためsetIntervalです。slideshowは値を返さないので、それを呼び出した結果はですundefined

その代わり:

tshone =setInterval(function() {
    slideshow('slideshow-one');
}, 500);

ここで、関数を作成し、それをに渡しsetIntervalます。関数はslideshow0.5秒ごとに呼び出します。

また、 1つ currIndexだけを使用しているが、2つの異なるスライドショーで使用しようとしていることにも注意してください。それはうまくいきません。完全に削除currIndexし、どのスライドがアクティブであるかをDOMから把握することをお勧めします。このようなもの:

function slideshow(slideshowId){
    var slideShow = $("ul#"+slideshowId);
    var slide;

    slide = slideShow.find("li.slides:visible");
    if (slide.length > 1) {
        slide.hide();
        slide = $();
    }
    slide = slide.hide().nextAll("li.slides").first();
    if (slide.length == 0) {
        slide = slideShow.find("li.slides").first();
    }
    slide.fadeIn();
}
于 2012-12-15T10:29:14.050 に答える