jquery自动滚动

问题描述:

我有一个div,我想每5秒自动滚动一次,我可以用JQuery来做到吗?jquery自动滚动

<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Example Slideshow</title> 
<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> 

<!-- initialize the slideshow when the DOM is ready --> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 
</head> 
<body> 
    <div class="slideshow"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html> 

这是exacly我想要的,但我希望它与标签,而不是图像工作......我可以修改它的工作?

+0

是的,看到我的修改答案。 – 2010-04-16 22:24:11

退房的scrollTop的()函数...

http://api.jquery.com/scrollTop/

+0

http://demo.webdesignbooth.com/content-slider/ 即时寻找类似的东西,但没有点击标签,我希望它是自动 – vick 2010-04-16 21:54:03

基于演示的链接您的评论,你可能想的周期插件,则:http://jquery.malsup.com/cycle/

是的,它会使用任何标签,而不仅仅是图像。如果您通过几个<div>标签要循环可以做些像这样:

<div class="slideshow"> 
    <div>Test 1</div> 
    <div>Test 2</div> 
    <div>Test 3</div> 
</div> 

它会通过幻灯片类中的任何标签周期。

有一个很酷的coda滑块插件。

http://www.ndoherty.biz/demos/coda-slider/2.0/

如果你想创建自己有这个教程一个自定义,

http://jqueryfordesigners.com/coda-slider-effect/

希望这些帮助,思南。

var scrolling = window.setInterval("autoScroll()", 5000); 

function autoScroll(elem) { 

    $(function() { 
     $('div#mycontainer').animate({ scrollTop: '+=' + 40 }); 
    }); 

}