Question

我的页面上有五个div（#art #fashion，＃self，＃nightlife，#community）。现在，当你将它们鼠标悬停时，它们会将页面内容加载到另一个容器div（#flyer）中。

我希望传单内容每5秒左右循环一次。

因此，它不应该鼠标悬停在那5个div上，而应该自动进行。

这有意义吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(document).ready(function() { 
        $("#art").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#fashion").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#self").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#nightlife").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
        $("#community").mouseover(function(){ $('#flyer').load($(this).attr("href") + ' #flyer'); return false; }); 
}); 
</script>

Answer 1

另一种方法是使用setInterval函数，如此......

$(document).ready(function() { 
    var sourceElements = $("#art,#fashion,#self,#nightlife,#community");
    var pointer = 0;
    setInterval(function() {
        $('#flyer').load($(sourceElements[pointer++]).attr("href") + ' #flyer');
        if (!sourceElements[pointer]) pointer = 0;
    , 5000}); 
});

Answer 2

我喜欢使用jquery循环（http://malsup.com/jquery/cycle/）的组合来循环内容和jquery缓动（http://gsgd.co.uk/sandbox/jquery/easing/）来添加一些动画效果来实现这个目标

通过jquery循环显示图像

2 个答案: