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 的组合使用；使用它们，新闻滑块功能每 10 毫秒重复一次并whichpanel递增。您使用延迟和动画平滑地为您的 div 设置动画，但news-numbers变化是连续的。

对于连续循环，最好使用setInterval并增加whichpanel动画函数的内部。有了这个，您不需要任何其他延迟或超时。

代码：

 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 回答