1

Newsslider を作成しましたが (動作します)、ボタン 1 から 4 をパネルに応じて強調表示することができません。彼らは常に変化しています。.cssがすぐに処理されることに関係があると思います。CSS呼び出しをタイムアウト関数に入れる必要があると思います。方法がよくわかりません。

http://jsfiddle.net/BkZyD/

var whichpanel = 1;
$('.news-numbers div:nth-child(' + whichpanel + ')').css({
 'background-color': '#00F'
}, 5000);

 function newsslider() {
 if (whichpanel < 4) {
     $('.news-numbers div:nth-child(' + whichpanel + ')').css({
         'background-color': '#243239'
     }, 5000);

     $('.news-slider').delay(3000).animate({
         'margin-top': '-=250px'
     }, function () {

     });
     whichpanel += 1;
     $('.news-numbers div:nth-child(' + whichpanel + ')').css({
         'background-color': '#00F'
     }, 5000);

 } else if (whichpanel >= 4) {
     $('.news-slider').delay(3000).animate({
         'margin-top': '0'
     }, 2000);
     whichpanel = 1;
 }

 setTimeout(newsslider, 0);
}

newsslider();
4

1 に答える 1

0

問題は、setTimeoutと delay を組み合わせて使用​​することです。これらを使用すると、ニューススライダー機能が 10ms ごとに繰り返され、whichpanelインクリメントされます。遅延とアニメーションを使用してdivをスムーズにアニメーション化しますが、news-numbers変化は継続的です。

連続ループを行うには、setIntervalwhichpanelを使用し、アニメーション関数内でインクリメントすることをお勧めします。これにより、他の遅延やタイムアウトは必要ありません。

コード：

 var whichpanel = 1;
 $('.news-numbers div:nth-child(1)').css({
     'background-color': 'red'
 });

 function newsslider() {

     if (whichpanel < 4) {

         $('.news-slider').animate({
             'margin-top': '-=250px'
         }, function () {
             whichpanel += 1;
             $('.news-numbers div').css({
                 'background-color': 'black'
             });
             $('.news-numbers div:nth-child(' + whichpanel + ')').css({
                 'background-color': 'red'
             });

         });

     } else {

         $('.news-slider').animate({
             'margin-top': '0'
         }, 1000, function () {
             whichpanel = 1;
             $('.news-numbers div').css({
                 'background-color': 'black'
             });
             $('.news-numbers div:nth-child(1)').css({
                 'background-color': 'red'
             });

         });
     }

 }

 var int = self.setInterval(function () {
     newsslider()
 }, 3000);

ここに実用的なフィドルがあります：http://jsfiddle.net/IrvinDominin/p4U3B/2/

于 2013-04-24T18:45:55.153 に答える