纯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写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- HTTPS&SPDY&HTTP2&QUIC&HTTP3
HTTPS 密钥交换,加密和解密 SPDY&HTTP2 QUIC&HTTP3
- MySQL登录退出与导入导出
登录退出MySQL 登录命令 mysql -u 用户名 -p 密码 -h IP -P 端口 mysql -u root -p password -h 127.0.0.1 -P 3306 一般登录命令 ...
- JDK10的新特性:var和匿名类
目录 简介 匿名类中自定义变量 lambda表达式中的匿名类 总结 简介 匿名类相信大家都用过了,学过JDK8中的lambda表达式之后,可以发现有些匿名类是可以用lambda表达式来替代的,能够被替 ...
- OpenHarmony有氧拳击之设备端开发
一.简介 在一个风和日丽,阳光明媚的下午,码农们都像往常一样正在专注地码代码.突然前面的小哥哥站起来,手握开发板,来回出拳.这是怎么回事? 原来这是一款拳击互动游戏,本文将带你一同解开其中的奥秘.开发 ...
- Python 简介和用途
什么是Python? Python是一种流行的编程语言,由Guido van Rossum创建,并于1991年发布. 它用于以下领域: 网页开发(服务器端) 软件开发 数学 系统脚本编写 Python ...
- openGauss事务机制中MVCC技术的实现分析
openGauss 事务机制中 MVCC 技术的实现分析 概述 事务 事务是为用户提供的最核心.最具吸引力的数据库功能之一.简单地说,事务是用户定义的一系列数据库操作(如查询.插入.修改或删除等)的集 ...
- Python语言Numpy包之Meshgrid 函数
Meshgrid 函数的基本用法 在 Numpy 的官方文章里, meshgrid 函数的英文描述也显得文绉绉的,理解起来有些难度.可以这么理解, meshgrid 函数用两个坐标轴上的点在平面上画网 ...
- centos 6.4更新163源
centos 6.4更新163源 1. 备份现在的源文件 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base. ...
- 利用navicat实现excel转json
1.需要工具,Navicat Premium,网上有破解及安装教程 2.新建sqlite连接,选择新建sqlite3,如下图 3.接着点确定,如图 4. 5.
- 把 Maven 提交到项目？Maven Wrapper的使用与好处
本文收录于 Github.com/niumoo/JavaNotes,Java 系列文档,数据结构与算法! 本文收录于网站:https://www.wdbyte.com/,我的公众号:程序猿阿朗 前言 ...