做出胶卷的效果——图片循环滚动播放
新近在轻博客中上线一个小功能，随手写了点代码，就贴上来了。
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>
博君一笑尔。
