0

プラグインを使用したくありませんが、jQuery は初めてです。次の HTML があります。

<div class="slide">
    <a href="http://www.mysite.co.uk"><img src="images/img.jpg" width="920" height="360" /></a>
    </div>

<div class="slide">
    <a href="http://www.mysite.co.uk"><img src="images/img.jpg" width="920" height="360" /></a>
    </div>

<div class="slide">
    <a href="http://www.mysite.co.uk"><img src="images/img.jpg" width="920" height="360" /></a>
    </div>

jQuery を使用して、最初の「スライド」以外を非表示にしました。

$('.slide:first').siblings().css('display', 'none');

私が今やりたいことは、スライドの div を自動的に進めることです。そのため、最初の div.slide を非表示にして 2 番目を表示し、それを非表示にして 3 番目を表示し、繰り返します。フェード トグル機能を見てきましたが、少し迷っていますか?

ありがとう、ジョン

4

1 に答える 1

2

これはあなたを少し助けるはずです。それが基本的に行うことは次のとおりです。

  1. 最初のスライド要素以外を非表示にします。
  2. 呼び出された関数では、現在表示されている要素を非表示にして、次の要素を表示したい..それは非常に簡単です:

ここに jsfiddle があります: http://jsfiddle.net/lucuma/CXsdP/4/ 

function doSlides() {

        var imgIndex = $('#slideshow div:visible').index();

        var imgNext = (imgIndex + 1) % $('#slideshow div').length;

        $('#slideshow div:visible').fadeOut(500);

        $('#slideshow div').eq(imgNext).fadeIn(500);
    }
    $('#slideshow div:gt(0)').hide();

    setInterval(doSlides, 1000);

これを行う別の方法を次に示します。

function doSlides() {
    var $imgIndex = $('#slideshow div:visible');

    var $next = $imgIndex.next();

    if ($next.length==0) {
        $next = $('#slideshow >:first-child');   // loop back to first 
    }
    $imgIndex.fadeOut(500);  
    $next.fadeIn(500);
}

$('#slideshow div:gt(0)').hide();

setInterval(doSlides, 1000);

</p>

于 2012-05-17T14:32:01.470 に答える