js实现图片从左到右循环播放

以前看同学的微信小游戏。背景场景是一张长图循环播放的。那么怎么实现循环播放呢？

<!DOCTYPE html>
<html><head><title>图片向右循环滚动</title><style>.picture {width: 200px;height: 100px;}</style></head><body><div id="demo" style="overflow:hidden;height:100px;width:800px;"><table align="left" cellpadding="0" cellspace="0" border="0"><tr><td id="demo1" valign="top" nowrap="nowrap"><img class="picture" src="./road(2).jpg" /><img class="picture" src="./sea2 (1).jpg" /><img class="picture" src="./sea2 (4).jpg" /><img class="picture" src="./sea3.jpg" /></td><td id="demo2" valign="top" nowrap="nowrap"></td></tr></table></div><script>var speed = 50demo2.innerHTML = demo1.innerHTMLfunction Marquee() {if (demo.scrollLeft <= 0) demo.scrollLeft += demo2.offsetWidthelse {demo.scrollLeft--}}var MyMar = setInterval(Marquee, speed)demo.onmouseover = function() {clearInterval(MyMar)   //鼠标悬停时，暂停滚动}demo.onmouseout = function() {MyMar = setInterval(Marquee, speed)   //鼠标移开时，开始滚动}</script></body>
</html>

如果想运行需要修改img标签内的图片路径。里面放的是我的图片。
最关键的是scrollLeft和offsetWidth和setInterval进行定时移动。

demo1和demo2里面是两遍图片。

demo2.innerHTML = demo1.innerHTML

scrollLeft指的是水平滚动轮距离当前最左边的位置
offsetWidth = width + padding + border
scrollWidth:获取对象的滚动宽度
clientWidth = width + padding

分析过程：
初始时：demo.scrollLeft为0，运行Marquee函数时。
demo.scrollLeft += demo2.offsetWidth
这时候界面显示的其实是demo2，
demo1现在在浏览器的左面，超出了显示范围。
之后进行scrollLeft减小，效果是图片向右移动，左边的demo1一点一点显示出来。当demo1显示完后，重新让demo1换到demo2的左边，demo1超出浏览器界面的左边。
这样的话需要设计demo的宽度正好等于图片宽度之和。设置overflow:hidden
并设置demo1和demo2的nowrap:nowrap使得图片不换行。

js实现图片从左到右循环播放相关推荐

I/0口输入输出实验流水灯程序 P0、P1、P2、P3口作为输出口，连接八只发光二极管，编写程序，使发光二极管从左至右循环点亮。
P0.P1.P2.P3口作为输出口,连接八只发光二极管,编写程序,使发光二极管从左至右循环点亮.流水灯程序程序: #include<reg51.h> //包含单片机定义寄存器的头文件 s ...
小应用程序运行结果如下：红色方块在文字上从左向右循环移动。
题目:小应用程序运行结果如下:红色方块在文字上从左向右循环移动. 代码如下: import java.applet.Applet; import java.awt.Color; import java ...
css实现div从左到右出现,css横向排列_css div 实现图片从左向右自动横向排列
摘要腾兴网为您分享:css div 实现图片从左向右自动横向排列,追书神器,中英翻译,优酷,武魂传说等软件知识,以及宝app,安卓串口,爱奇艺看图软件,爆枪英雄好号送,手机短信加密软件,阳光厨房,c ...
怎么让图片从左往右移动php,javascript - 想让图片上那个块，在增加块的宽度的时候向右边移动，而不是向左边移动。需要怎么解决？...
javascript - 想让图片上那个块,在增加块的宽度的时候向右边移动,而不是向左边移动.需要怎么解决? 滿天的星座2017-07-05 10:39:20 0 2 212 * { marg ...
RAID5中的“左、右循环”与“同步、异步”(2)
1. 异步与同步所谓"异步"与"同步",是指数据块的写入方式. u 异步在RAID5中,数据块的写入有两种方式,一种是当写满一个条带 ...
php如何从左往右轮播,js实现从左向右滑动式轮播图效果
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
抖音上css照片动态旋转怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
php图片滑动怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
js实现图片加载特效（从左到右，百叶窗，从中间到两边）
/* 网上百度的,感觉"从中间到两边"的效果写的不是很好,改了一下,感觉可以了!*/<html><head><title></title& ...

js实现图片从左到右循环播放

js实现图片从左到右循环播放相关推荐

最新文章

热门文章