jquery文本滑块循环

我一直在试图创建一个文本滑块，它淡入淡出和幻灯片，然后淡出和滑出。然后下一个元素出现并做同样的事情。jquery文本滑块循环

管理拿出这个。

$(document).ready(function() { 
    $('#heading1').css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);  
    $('#heading1').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); 

    $('#heading2').css({opacity: 0}).delay(7000).animate({opacity: 1.0,left: "50px"}, 1000); 
    $('#heading2').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); 

    $('#heading3').css({opacity: 0}).delay(14000).animate({opacity: 1.0,left: "50px"}, 1000); 
    $('#heading3').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); 

    $('#heading4').css({opacity: 0}).delay(21000).animate({opacity: 1.0,left: "50px"}, 1000); 
    $('#headings4').css({opacity: 0}).delay(5000).animate({opacity: 0,left: "-50px"}, 1000); 

})

似乎有点微不足道具有有这些延误？有没有更有效的方法，我怎么循环这个，所以它不断循环。

来源

2013-05-20 KHAN

不是最好的解决方案，但它会让你开始正确的轨道。

http://jsfiddle.net/3JKkj/20/

var heading_cur=0;//current header 
function showHeading(){ 
    $('#heading'+(heading_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000); 
    setTimeout(hideHeading, 5000);//hide it in 5 seconds 
} 
function hideHeading(){ 
    $('#heading'+(heading_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-50px"}, 1000 
     ,function(){ 
      showHeading();//show the next when this has completed 
     }); 
    heading_cur=(heading_cur+1)%4; 
} 
$(document).ready(function() { 
    showHeading();//start the loop 
})

CSS

#heading1,#heading2,#heading3,#heading4{ 
    position:absolute; 
    left:0; 
    opacity:0;/* Initial state */ 
}

来源

2013-05-20 21:17:58 Knyri

这就是我想要的。 TY。％4做什么？没有机会玩弄它 – KHAN

这是模数运算符。它返回一个部门的剩余部分。当显示第4个标题时，它有效地将计数器重置为0。 – Knyri

我明白了。我想知道为什么这是最好的解决方案。看看这篇文章上面的解决方案。这个比较看起来更简洁。我已经注意到将这一点付诸实践，并对另一组元素进行相同处理。所以标题向左滑动并且图像向右滑动。它们并不总是保持同步。尽管元素的时间和数量完全相同。 – KHAN

jquery文本滑块循环

回答

相关问题