2

私はこのマークアップを持っています：

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

そしてこのスクリプト

setInterval(function(){
    $('.slider_item.active').fadeOut().removeClass('active')
        .next('.slider_item').fadeIn().addClass('active');
}, 5000);

このループを最良の方法で作成するにはどうすればよいですか？現在、最初の画像が再びフェードインすることなく、最後の画像がフェードアウトします。

4

4 に答える 4

1

デモ: http://jsfiddle.net/gdS8Q/2/

var cur = 0;
var count = $('.slider_item').length;

$('.slider_item').hide();
$('.slider_item').eq(0).show();

setInterval(function() {    
    $('.slider_item').eq(cur).fadeOut(function () {
        $(this).removeClass('active');
        cur = (cur + 1) % count;
        $('.slider_item').eq(cur).addClass('active').fadeIn();
    });
}, 2000);​
于 2012-09-06T13:35:44.497 に答える
0

古いスレッドにぶつかっていることは知っていますが、前のdivを表示するための正しいコードを教えてもらえますか?

これはHTMLです

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

そしてjQuery

     var nextItem = $('.slider_item.active')
        .fadeOut()
        .removeClass('active')
       .next('.slider_item');

 if (nextItem.length === 0) {
       nextItem = $('.slider_item').first();
    }
       nextItem.fadeIn().addClass('active');

jsfiddle リンクを見て、さまざまな組み合わせを試しましたが、正しいコードを把握できないようです

ありがとう

于 2016-12-25T22:13:58.913 に答える
0

私は実際にこのためのプラグインを書いたばかりで、かなり読みやすいので、見ただけで理解できるでしょう。

Github リポジトリ - https://github.com/joshbedo/fullPageSlider/blob/master/fullpagesliderV2.js

矢印の機能の一部は、より動的にするためにまだ作業中ですが、ここでも機能します。私は html をスライドさせていますが、内部に画像を含む .slide-panel クラスを簡単に追加できます。

実際に http://strikingalchemy.publishpath.com/portfolio

編集: 彼らはスクリプトを編集したので、setInterval ループはありません。github のオリジナルには、ユーザーが矢印をクリックしてもっと見たいと思ったときにインターバル ループがあります。ロード時にループさせたい場合は、簡単に変更できます。ユーザーが興味を持っていないときに余分なリソースを使用したくありませんでした。仕事の後、後でgithubに例を載せる予定です。

于 2012-09-06T13:35:26.880 に答える