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

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

 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>

博君一笑尔。

转载于:https://www.cnblogs.com/xiao-yao/archive/2012/03/27/2419758.html

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

网页图片循环滚动播放效果
图片:http://download.csdn.net/detail/richard_jason/9669814 效果图: 示例代码(HTML): <!DOCTYPE html PUBLIC & ...
3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果.se ...
【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
Qt图片定时滚动播放器+透明过渡动画
目录参考结构 PicturePlay.pro main.cpp myqlabel.h 自定义QLabel myqlabel.cpp自定义QLabel pictureplay.h picturepl ...
html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
JS实现图片循环滚动
之前在前端的时候有遇到这样一个问题,实现 JS 图片的循环滚动,然后鼠标移入的时候停止滚动,鼠标移开继续滚动,这里无非就是设置了一个定时器,鼠标移上时清除定时器达到滚动停止的目的,鼠标移开时重设定时器 ...
cocos2d（背景图片循环滚动）
背景图片循环滚动使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
js实现图片连续滚动播放
实现效果: 1.页面加载后,图片自动开始滚动播放 2.鼠标移入暂停,并放大显示,鼠标移出后继续滚动实现思路: 1.首先设置一个外框,固定宽度,超出范围的图片隐藏掉 2.复制一遍图片列表,追加一组在当 ...

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

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

最新文章

热门文章