新近在輕博客中上線一個小功能，隨手寫了點代碼，就貼上來了。

1 <script type="text/javascript">
2 var scrollBox = document.getElementById("classicScrollBox");
3 var num_record = 0;//計時器
4 window.onload = function(){
5 function scrolls(){
6 scrollBox.style.left = (parseInt(scrollBox.style.left)-1) +'px';
7 num_record += 1;
8 if(num_record == 126*6){//圖片寬度*圖片張數(shù)
9 scrollBox.style.left = 0 + 'px';
10 num_record = 0;
11 }
12 }
13 setInterval(scrolls,50);//每多久執(zhí)行一次
14 }
15 </script> setInterval函數(shù)的簡單運用，達到膠片循環(huán)播放的效果。只要將未轉(zhuǎn)動時顯示的圖片再一次加在播放隊列的尾部就行。 頁面部分代碼如下： 1 <ul class="classicPhotoBox"id="classicScrollBox" style="left:0;">
2 <li><a href="#"><img src="http://images.cnblogs.com/temp/pic_122x89.jpg" alt=""></a></li>
3 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong1.jpg" alt=""></a></li>
4 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong2.jpg" alt=""></a></li>
5 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong3.jpg" alt=""></a></li>
6 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong4.jpg" alt=""></a></li>
7 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong5.jpg" alt=""></a></li>
8 <li><a href="#"><img src="http://images.cnblogs.com/temp/pic_122x89.jpg" alt=""></a></li>
9 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong1.jpg" alt=""></a></li>
10 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong2.jpg" alt=""></a></li>
11 <li><a href="#"><img src="http://www.sinaimg.cn/blog/qing/image/zhuanti/xiaotu1/zhangugorong/guorong3.jpg" alt=""></a></li>
12 </ul> 博君一笑爾。

轉(zhuǎn)載于:https://www.cnblogs.com/xiao-yao/archive/2012/03/27/2419758.html

總結

以上是生活随笔為你收集整理的做出胶卷的效果——图片循环滚动播放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。