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

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

 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">12                     </ul>

博君一笑尔。