2019独角兽企业重金招聘Python工程师标准>>>

原生JS实现图片滚动

一、原理

黑色盒子是最终显示滚动图像的区域，绿色盒子为其子容器，其宽度要大于黑色外层盒子，这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像，而紫色的盒子的内容将来将与蓝色盒子相同，以实现无缝的图像滚动。通过JS的定时器每隔一定的时间，更改黑色盒子的scrollLeft属性的值，使图像向左进行滚动，同时判断scrollLeft的值，如果其值到达黑色盒子容器的最右侧时，说明蓝色盒子已经向左侧滚动出了黑色盒子，紫色盒子刚好全部位于黑色盒子内部。此时，需要将黑色盒子的scrollLeft的值设置为0，重新开始。

二、代码

1.html代码

<!\-\- 最外层盒子 --\>
<div id="box"> <div id="boxin"> <div id="neirong"> <img src="Images/C_2.jpg" alt=""> <img src="Images/C_3.jpg" alt=""> <img src="Images/C_4.jpg" alt=""> <img src="Images/C_5.jpg" alt=""> <img src="Images/C_6.jpg" alt=""> </div> <div id="neirong2"></div> </div>
</div>

2.CSS代码

 *{margin: 0; padding: 0; } #box{ height: 100px; width: 500px; overflow: hidden; } #boxin{ width: 1064px; height: 100px; }#neirong{float: left;}#neirong2{float: left;}img{width: 100px;height: 100px;}
</style>

3.JS代码

<script>var timer;var speed=10;var box=document.getElementById("box");var boxin=document.getElementById("boxin");var neirong=document.getElementById("neirong");var neirong2=document.getElementById("neirong2");neirong2.innerHTML=neirong.innerHTML;function move(){if(neirong2.scrollWidth-box.scrollLeft<=0){box.scrollLeft=0;}else{box.scrollLeft++;}            }box.onmouseover=function(){clearInterval(timer);}box.onmouseout=function(){timer=setInterval(move,speed);}timer=setInterval(move,speed);</script>

转载于:https://my.oschina.net/u/3537796/blog/3047527

原生JS实现图片滚动相关推荐

html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
十分钟教会你原生JS压缩图片，极其精简版
十分钟教会你原生JS压缩图片,极其精简版原文链接:https://blog.csdn.net/yasha97/article/details/83629510 (一)实现思路先通过input标签获 ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
原生JS实现的滚动抽奖工具（可设置每个奖品概率、滚动速度、滚动圈数）
使用原生JS实现的滚动抽奖效果,可对每个奖品设置概率实现以下功能: 1.可针对每个奖品设置概率 2.可设置最少滚动圈数 3.可设置滚动速度 4.可设置从倒数第几个开始减慢速度演示图 HTML部分 ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
原生JS 实现字幕滚动
原生JS 实现字幕滚动 <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...

原生JS实现图片滚动

原生JS实现图片滚动

一、原理

二、代码

1.html代码

2.CSS代码

3.JS代码

原生JS实现图片滚动相关推荐

最新文章

热门文章