做出胶卷的效果——图片循环滚动播放

新近在轻博客中上线一个小功能，随手写了点代码，就贴上来了。

 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){//图片宽度*图片张数
 9                 scrollBox.style.left = 0 + 'px';
10                 num_record = 0;
11             }
12         }
13         setInterval(scrolls,50);//每多久执行一次
14     }
15 </script>

setInterval函数的简单运用，达到胶片循环播放的效果。只要将未转动时显示的图片再一次加在播放队列的尾部就行。

页面部分代码如下：

 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>

博君一笑尔。