2

自動化されたスライダーを作成しようとしましたが、コードが機能していないようです。ブラウザーがクラッシュするか、非常に高速に実行されます。

私がいじっているのはsetTimeoutですが、whileループでは機能しないようです。

var playSlider = true;

if(playSlider) {
    var i = $('#sliderwrapper ul li:visible').attr('data-number');
    var lengthLi = $('#sliderwrapper ul li').size();
    while(i<=lengthLi) {
        var x = i + 1;
        setTimeout(function(){
            $('#sliderwrapper ul li[data-number=' + i + ']').fadeOut(450);
            $('#sliderwrapper ul li[data-number=' + x + ']').fadeIn(600);
        }, 3000);
        i++;
    }
}

HTML:

<ul>
    <li data-number="1" data-description="Buy now!"><img src="images/slider1.png" border="0"></li>
    <li data-number="2" data-description="Buy later!"><img src="images/slider2.png" border="0"></li>
    <li data-number="3"><img src="images/slider3.png" border="0"></li>
    <li data-number="4"><img src="images/slider4.png" border="0"></li>
    <li data-number="5"><img src="images/slider5.png" border="0"></li>
    <li data-number="6"><img src="images/slider2.png" border="0"></li>
    <li data-number="7"><img src="images/slider3.png" border="0"></li>
    <li data-number="8"><img src="images/slider5.png" border="0"></li>
    <li data-number="9"><img src="images/slider1.png" border="0"></li>
</ul>
4

4 に答える 4

2

.delay("3000") を使用して、JQuery コマンド間に休止を置くことができます

于 2013-02-08T14:06:28.407 に答える
1

変更した点がいくつかありました...

var playSlider = true;
if(playSlider) {
    var i = $('#sliderwrapper ul li:visible').attr('data-number');
    var lengthLi = $('#sliderwrapper ul li').length();
    while(i <= lengthLi) {
        var x = i + 1;
        setTimeout(function(){
            $('#sliderwrapper ul li[data-number=' + i + ']').fadeOut(450);
            $('#sliderwrapper ul li[data-number=' + x + ']').fadeIn(600);
        }, 3000 * i);
        i++;
    }
}

li 要素をカウントするように変更.size()し(サイズは非推奨)、タイムアウトを に変更しました。そうしないと、すべてがフェードアウトして 3 秒後に同時にインします。.length()3000 * i

于 2013-02-08T14:12:29.137 に答える
0

LIVE DEMO

var $li = $('#sliderwrapper ul li');
var N = $li.length;
var C = 0 ;
var intv ;

$li.hide().eq(C).show();

function loop(){
  intv = setInterval(function(){
    $li.eq( ++C % N ).fadeTo(500,1).siblings().fadeTo(500,0);
  },3000);
}
loop(); 

$('#sliderwrapper').on('mouseenter mouseleave', function( e ){      
    var mEnt = e.type=='mouseenter' ? clearInterval( intv ) : loop() ;      
});
于 2013-02-08T14:25:21.637 に答える
0

次に、少し再帰が役立ちます。

function rec(){
    //your code and so on
    setTimeout(function(){
        rec();
    },3000);
}
于 2013-02-08T14:07:58.927 に答える