纯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写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- 安卓开发数据可视化---导入数据到excel表格
现在是2021-03-12 00::39 刚刚完成了一个小软件部分功能,现在把出现的问题总结如下: 一.首先要下载jar包 网址:https://mvnrepository.com/artifact/ ...
- Nacos 服务发现，注册及管理
Nacos Nacos(官网: https://nacos.io) 发现,注册及管理. Nacos 支持发现,配置及管理几乎所有类型的服务: Kubernetes Service gRPC | Dub ...
- C++虚继承原理与类布局分析
C++虚继承原理与类布局分析 引言 在开始深入了解虚继承之前,我们先要明白C++引入虚继承的目的.C++有别于其他OOP语言最明显的特性就是类的多继承,而菱形继承结构则是多继承中最令人头疼的情况. 我 ...
- #主席树，Dijkstra，哈希#CF464E The Classic Problem
题目 边权均为2的幂次的无向图,求 \(S\) 到 \(T\) 的最短路 \(n,m\leq 10^5\) 分析 最短路直接考虑用 Dijkstra,它需要维护松弛操作和堆, 那么也就是要重载加号和小 ...
- #凸包，闵可夫斯基和#CF87E Mogohu-Rea Idol
题目 按逆时针顺序给出三个凸包点集 \(\mathbb{A,B,C}\),每次查询给出点 \(D\), 问是否存在点 \(A\in\mathbb{A},B\in\mathbb{B},C\in\math ...
- OTP/HOTP/TOTP的资料
参考资料 [加解密]动态令牌-(OTP,HOTP,TOTP)-基本原理 每天一个小知识:HOTP HOTP和TOTP算法图解 RFC HMAC: Keyed-Hashing for Message A ...
- Jetty的http模块
启用http模块,执行如下命令: java -jar $JETTY_HOME/start.jar --add-modules=http 查看http模块的配置文件,执行如下命令: cat $JETTY ...
- HarmonyOS账号服务，畅行鸿蒙生态所有应用与服务
账号对于用户来说并不陌生,在购买新设备或者使用新应用的时候,用户常常会被引导注册或者登录账号,账号就是用户在这些设备或应用内的通行证.根据华为上半年的一项统计,整体上中国网民人均下载App量在68个, ...
- 家庭实验室系列文章-电脑如何配置网络唤醒 (WOL)?
前言 其实这个专题很久很久之前就想写了,但是一直因为各种原因拖着没动笔. 因为没有资格,也没有钱在一线城市买房 (); 但是在要结婚之前,婚房又是刚需. 我和太太最终一起在一线城市周边的某二线城市买了 ...
- 开发指导—利用CSS动画实现HarmonyOS动效（一）
注:本文内容分享转载自HarmonyOS Developer官网文档 一. CSS语法参考 CSS是描述HML页面结构的样式语言.所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件.页面自 ...