纯JS实现多张图片无缝滚动和多张图片上下滚动的效果--JavaScript实例集锦（初学）
我们会看到很多的网站上会使用多张图片无缝滚动的效果。
下面我就介绍几种纯JS实现多张图片的无缝滚动，并实现鼠标移到图片上运动停止的效果，可以控制图片左右滚动。
1.效果展示：
代码实现：
<!DOCTYPE html><html><head> <title>无缝滚动</title></head><style type="text/css">*{margin: 0;padding: 0;} #div1{position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;} #div1 ul{position: absolute;left: 0;} #div1 ul li{list-style: none;width:200px;float: left;padding: 10px;height: 160px;} #div1 ul li img{width:100%;}</style><script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var aA=document.getElementsByTagName('a');//获取向右向左的箭头 var timer=null; var iSpeed=10; oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放 oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的 function fnMove(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left=0; }else if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; }//定义到边界的时候，实现无缝衔接
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果 } timer=setInterval(fnMove,30); aA[0].onclick=function(){ iSpeed=-10;
//按下左箭头，定义向左运动
} aA[1].onclick=function(){ iSpeed=10;
//按下右箭头，定义向右运动 } oDiv.onmouseover=function(){ clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动 } oDiv.onmouseout=function(){ timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动 } };</script><body> <a href="javascript:;">←</a> <a href="javascript:;">→</a><div id="div1"> <ul> <li><img src="miaoflash/images/1.jpg"></li> <li><img src="miaoflash/images/2.jpg"></li> <li><img src="miaoflash/images/3.jpg"></li> <li><img src="miaoflash/images/4.jpg"></li> <li><img src="miaoflash/images/5.jpg"></li> <div style="clear: none;"></div> </ul></div></body></html>
使用函数，此代码更为简便。
2.简易的无缝滚动：
效果图：
只朝一个方向滚动，鼠标移入暂停滚动，鼠标移出，滚动继续，没有使用单独的函数
代码实现：
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动</title>
<style type="text/css">
*{margin:0;padding: 0;}
.roll .wrap{width:1500px;overflow: hidden; height: 344px;margin: 0 auto;position: relative;}
.roll li{float: left;list-style: none;width: 700px;height: 344px;}
.roll ul{position: absolute;top: 0;left: 0;}
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('roll');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName("li");
var iSpeed=-5;
var timer=null;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0px';
}
},30); oUl.onmouseover=function(){
clearInterval(timer);
}
oUl.onmouseout=function(){
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft+iSpeed+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oul.style.left='0px';
}
},30);
}
}; </script>
</head>
<body>
<div class="roll" id="roll">
<div class="wrap">
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
3.上下滚动：效果图：
代码实现：
<!DOCTYPE html>
<html>
<head>
<title>上下滚动</title>
<style type="text/css">
*{margin:0;padding: 0;}
div#miaovslide {text-align: center;}
.wrap{width:500px;overflow: hidden; height: 700px;margin: 0 auto;position: relative;}
.wrap img{width: 100%;}
li{list-style: none;width: 700px;height: 344px;padding: 10px 0;}
ul{position: absolute;top: 0;left: 0;}
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('miaovslide');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');//获取所有的li
var oUp=document.getElementById('up');//获取向上轮播的按钮
var oDown=document.getElementById('down');//获取向下轮播的按钮
var timer=null;//定义定时器
var iSpeed=0;//定义初始速度
oUl.innerHTML+oUl.innerHTML; //实现循环无间断的图片流
oUp.onmousedown=function(){
timer=setInterval(doMove,30);
iSpeed=-5;
//当按下向左的按钮时，设置速度为负，即向上滚动
};
oUp.onmouseup=function(){
clearInterval(timer);
//当抬起鼠标时，清除定时器
};
oDown.onmousedown=function(){
iSpeed=5;
timer=setInterval(doMove,30);
//当鼠标按下向右的按钮时，设置速度为正，即向下滚动 }
oDown.onmouseup=function(){
clearInterval(timer);
//当鼠标抬起时，清除定时器 }
function doMove(){
oUl.style.top=oUl.offsetTop+iSpeed+'px';
if(oUl.offsetTop<-oUl.offsetHeight/2){
oUl.style.top='0px';
}else if(oUl.offsetTop>0){
oUl.style.top=-oUl.offsetHeight/2+'px';
}
};
}; </script>
</head>
<body>
<div class="slide_module" id="miaovslide">
<div id="up"><img src="data:images/prevup.png"></div>
<div class="wrap">
<ul>
<li><img src="data:images/1.jpg"></li>
<li><img src="data:images/2.jpg"></li>
<li><img src="data:images/3.jpg"></li>
<li><img src="data:images/4.jpg"></li>
</ul>
</div>
<div id="down"><img src="data:images/nextdown.png"></div>
</div>
</body>
</html>
纯JS实现多张图片无缝滚动和多张图片上下滚动的效果--JavaScript实例集锦（初学）的更多相关文章
- jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
- 纯js无缝滚动
HTML代码 <!--父容器要使用overflow: hidden;--> <div id="imgsList" style="height:150px ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
- 纯JS实现鼠标每隔一段时间才能让页面再次滚动
这里没有用到浏览器的兼容性写法,只是提供思路(这里使用的是Google浏览器的方法) javascript代码部分: //获取html元素var oHtml =document.documentEle ...
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- 纯Js ——文字上下左右滚动
ScrollBaseJs.js var $$ = function (id) { return typeof id == 'string' ? document.getElementById(id) ...
- 纯JS阻止浏览器默认滚动事件，实现自定义滚动方法
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- 【实践】纯jquery实现图片滑动无缝轮播，带左右按钮及控制按钮
在此随笔之前,博主已经做过一次图片滑动轮播,如过你也有看过就会知道里面的效果在自动轮播的时候有一个不太美观的效果,就是当最后一张图片滑动切换到第一张图片的时候会看到一个快速向左滑动的效果,这是很不美观 ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- Python 列表list方法clear( )和直接list [ ]的区别
x.clear()是将内存地址清空, x=[ ]会新开辟一个内存空间.
- #K-D Tree#BZOJ 4303 数列
题目传送门 分析 将 \((i,p_i)\) 视为一个点,那么相当于对横坐标或纵坐标对应的点区间乘.区间加或者区间求和, 把这些点丢到 K-D Tree 上,维护最小/大横/纵坐标,如果当前区间点在范 ...
- #莫比乌斯反演，欧拉函数#洛谷 5518 [MtOI2019]幽灵乐团
题目传送门 分析 前置知识:\(\sum_{d|n}\mu(d)=[n==1]\),\(\sum_{d|n}\mu(d)\frac{n}{d}=\varphi(n)\) 把最小公倍数拆开可以得到 \[ ...
- #树上启发式合并，trie#JZOJ 5363 生命之树
分析 考虑按位处理, 如果熟悉dsu的话可以发现这道题能够用dsu做, 再用两个trie分别维护该位为0或1的字符串, 重儿子可以按照子树字符串的总长计算 代码 #include <cstdio ...
- C语言 03 原码 反码 补码
原码 计算机中所有的数字都是使用 0 和 1 这样的二进制数来进行表示的. 这时如果要存储一个数据,比如十进制的 3,那么就需要使用 2 个二进制位来保存,二进制格式为 11,占用两个位置,称为 2 ...
- HR必备|可视化大屏助HR实现人才资源价值最大化
人力资源管理质量的优劣关系到企业可持续发展目标的实现,在信息化时代背景下,应用信息技术加强人力资源管理过程的优化,利用技术提升人力资源管理质量和效率已是大势所趋. 利用信息技术构建信息化人力资源管理平 ...
- SMOKE多模式排放清单处理技术及EDGAR/MEIC清单制作与VOCs排放量核算
大气污染问题既是局部.当地的,也是区域的,甚至是全球的.本地的污染物排放除了对当地造成严重影响外,同时还会在动力输送作用下,极大地影响下风向地区的大气环境状况.数值模式模拟是分析大气污染物时空分布和成 ...
- mongodb基础整理篇————副本原理篇[外篇]
前言 简单介绍一下副本集的原理篇. 正文 下面是几个基本的原理: 副本之间是如何复制的? mongodb 实现此功能的方式是保存操作日志,其中包含了主节点执行的每一次操作,这和mysql比较像. op ...
- leetcode：1337. 方阵中战斗力最弱的 K 行
1337. 方阵中战斗力最弱的 K 行 给你一个大小为 m * n 的方阵 mat,方阵由若干军人和平民组成,分别用 0 和 1 表示. 请你返回方阵中战斗力最弱的 k 行的索引,按从最弱到最强排序. ...
- Unity性能优化——托管堆/GC
了解托管堆 许多 Unity 开发者面临的另一个常见问题是托管堆的意外扩展.在 Unity 中,托管堆的扩展比收缩容易得多.此外,Unity 的垃圾收集策略往往会使内存碎片化,因此可能阻止大型堆的收缩 ...