写了一个很多人写过的小东西，很常见的滚动图片展示效果，其实之前也写过类似的demo，具体请移步Jquery滚动lightbox效果。原理差不多，只不过稍微修改了一下，依然分为两种情况，这个demo是在别人的静态页面基础上修改的，你可以把重点放在js上，希望对你有帮助。
第一种效果还是当元素自动滚动到尽头就会自动回到第一个，这是个比较常用的方法了。
滚动到头自动返回demo
第二种情况是当元素滚动到了尽头不自动回到第一个，而是接着往下走，依次循环（这个demo有个问题，就是jquery1.4的貌似不行，只能用1.3的，哎）
滚动不返回demo
代码我就不贴了，写的不好，如果需要其他滚动方式的话可以自行修改，我不会追究版权问题滴。
/*这年头*/
相关日志-小站地图为你展开
<![CDATA[
<ol>
<li class="comment even thread-even depth-1" id="li-comment-2078">
<div id="comment-2078">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/8c8d9931e5d1ba7537982f65fea8d805.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://ons.me/' rel='external nofollow' class='url'>西门</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在561 天之前</span>
</div>
<div class="comment-text clearfix">
<p>我看木木那个，我就准备写一个的，结果懒没写，正好你写了，参考一下 (开怀)</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2078#respond' onclick='return addComment.moveForm("comment-2078", "2078", "respond", "1666")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2084">
<div id="comment-2084">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在560 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@西门, 你值得拥有 (路过)</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2084#respond' onclick='return addComment.moveForm("comment-2084", "2084", "respond", "1666")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2079">
<div id="comment-2079">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/2a72dea50051d8d74174edfeb3a1bc48.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://axiu.me' rel='external nofollow' class='url'>阿修</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.44' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在561 天之前</span>
</div>
<div class="comment-text clearfix">
<p>(开怀) 看着不错啊，我就喜欢demoZ~~</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2079#respond' onclick='return addComment.moveForm("comment-2079", "2079", "respond", "1666")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2085">
<div id="comment-2085">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在560 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@阿修, 只要大家觉着有用就行</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2085#respond' onclick='return addComment.moveForm("comment-2085", "2085", "respond", "1666")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-even depth-1" id="li-comment-2080">
<div id="comment-2080">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/6a3c42d009cc1539ef1c617b3921f944.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.iklive.com' rel='external nofollow' class='url'>创享·生活</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 5.0.375.99' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在561 天之前</span>
</div>
<div class="comment-text clearfix">
<p>我觉得第一个有爱点。哈哈</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2080#respond' onclick='return addComment.moveForm("comment-2080", "2080", "respond", "1666")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2086">
<div id="comment-2086">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在560 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@创享·生活, 各取所需哈</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2086#respond' onclick='return addComment.moveForm("comment-2086", "2086", "respond", "1666")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-2082">
<div id="comment-2082">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/28d10aaed83b0ef981dd2fbdee2e68ec.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.evlos.org' rel='external nofollow' class='url'>小邪</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/nl.png" title="NETHERLANDS" alt="NETHERLANDS" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 9.0.565.0' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在560 天之前</span>
</div>
<div class="comment-text clearfix">
<p>第二个要是木有cookies什么记忆的话，翻几十页，然后下次来还要翻几十页，就杯具了。</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2082#respond' onclick='return addComment.moveForm("comment-2082", "2082", "respond", "1666")'>回复</a> </div>
</div>
<ul class='children'>
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="li-comment-2087">
<div id="comment-2087">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/039f1f8556b02dd133ec6974036727db.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.laozhuhome.com' rel='external nofollow' class='url'>N</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 7.0.517.41' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows.png' title='Windows XP' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在560 天之前</span>
</div>
<div class="comment-text clearfix">
<p>@小邪, 剩下的任务交给你了 (路过)</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2087#respond' onclick='return addComment.moveForm("comment-2087", "2087", "respond", "1666")'>回复</a> </div>
</div>
</li>
</ul>
</li>
<li class="comment even thread-even depth-1" id="li-comment-2083">
<div id="comment-2083">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/26e7e496359a58a7a56cdfb5db6bf732.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://www.vagaa.in' rel='external nofollow' class='url'>vagaa</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/ie.png' title='Internet Explorer 6.0' alt='Internet Explorer' width='14px' height='14px' class='browser-icon' /> </cite>
<span class="comment-meta commentmetadata">在560 天之前</span>
</div>
<div class="comment-text clearfix">
<p>马上就快到更新PR的日子了，不知贵博还准备好了没有,赶快链接吧</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2083#respond' onclick='return addComment.moveForm("comment-2083", "2083", "respond", "1666")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2183">
<div id="comment-2183">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/d22afb4edb8a2410176d7e858fd8fdf3.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn"><a href='http://www.laozhuhome.com/?r=http://zhaoweitian.com' rel='external nofollow' class='url'>Weitian Zhao</a> <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 5.0.375.126' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在549 天之前</span>
</div>
<div class="comment-text clearfix">
<p>又来体验大图标了…前阵出去了一趟…<br />
(开怀) (开怀) (开怀)<br />
(囧) (怒) (汗) (伤心) (哭) (鼻涕) (看看)</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=2183#respond' onclick='return addComment.moveForm("comment-2183", "2183", "respond", "1666")'>回复</a> </div>
</div>
</li>
<li class="comment even thread-even depth-1" id="li-comment-3186">
<div id="comment-3186">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/7529f8135325d101fd709854fa3ba689.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn">liaoxy <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/firefox.png' title='Mozilla Firefox 3.6.16' alt='Mozilla Firefox' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在407 天之前</span>
</div>
<div class="comment-text clearfix">
<p>恩恩，谢谢分享了，刚想弄个不返回的滚动图片</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=3186#respond' onclick='return addComment.moveForm("comment-3186", "3186", "respond", "1666")'>回复</a> </div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3590">
<div id="comment-3590">
<div class="comment-author vcard">
<img alt='' src='http://www.laozhuhome.com/avatar/48fd790b5d35155053fccf524a3f57a6.jpg' class='avatar avatar-80 photo' height='80' width='80' /> <cite class="fn">neal.z <img src="http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/flags/cn.png" title="CHINA" alt="CHINA" class="country-flag" /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/chrome.png' title='Google Chrome 10.0.648.204' alt='Google Chrome' width='14px' height='14px' class='browser-icon' /> <img src='http://www.laozhuhome.com/wp-content/plugins/comment-info-detector/browsers/windows_win7.png' title='Windows 7' alt='Windows' width='14px' height='14px' class='os-icon' /> </cite>
<span class="comment-meta commentmetadata">在348 天之前</span>
</div>
<div class="comment-text clearfix">
<p>不错.谢谢分享!</p>
</div>
<div class="reply">
<a class='comment-reply-link' href='/html/jquery-scroll?replytocom=3590#respond' onclick='return addComment.moveForm("comment-3590", "3590", "respond", "1666")'>回复</a> </div>
</div>
</li>
</ol>
]]>
快来吐槽吧
