纯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写淘宝无缝轮播图效果 需求分析: ...
随机推荐
- WPF中动画教程（DoubleAnimation的基本使用）
实现效果 今天以一个交互式小球的例子跟大家分享一下wpf动画中DoubleAnimation的基本使用.该小球会移动到我们鼠标左键或右键点击的地方. 该示例的实现效果如下所示: 页面设计 xaml如下 ...
- 陈海波：OpenHarmony技术领先，产学研深度协同，生态蓬勃发展
11月4日,以"技术筑生态,智联赢未来"为主题的第二届OpenHarmony技术大会在北京隆重举办.本次大会由OpenAtom OpenHarmony(简称"Open ...
- 构筑立体世界，AR Engine助力B站会员购打造沉浸式营销
随着购物场景的逐渐多元化,越来越多电商平台把线下购物体验搬到线上,运用AR技术,跨越空间距离,帮助用户在购买前"体验"商品,增强购买意愿. 哔哩哔哩会员购(后称会员购)是B站于20 ...
- Jenkins首次启动慢
场景描述启动Jenkins后,打开网站,发现一直卡在这个启动页面,慢,很慢,非常慢 解决方法 进入Jenkins的安装目录,找到"hudson.model.UpdateCenter.xml& ...
- Telnet qsnctfwp
Windows 安装 Telnet 在控制面板的程序和功能中选择打开或关闭Windows功能 启用 Telnet 客户端并单击确认退出 启动终端,输入命令 telnet 打开 Telnet 客户端 在 ...
- SpringBoot使用Redis做缓存结合自带注解
配置Spring Cache <dependency> <groupId>org.springframework.boot</groupId> <artifa ...
- Swagger2的介绍和使用
Swagger2介绍 前后端分离开发模式中,api文档是最好的沟通方式. Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 及时性 (接口变 ...
- React纯组件的使用
1. 有无必要使用纯组件 如果应用不是很大型,页面渲染效率使用纯组件与非纯组件差别不大,尽量使用组件 应用一定注意,setState时子组件依赖渲染的属性一定要传递给子组件,不然父组件setState ...
- 力扣239(Java)- 滑动窗口最大值（困难）
题目: 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧.你只可以看到在滑动窗口内的 k 个数字.滑动窗口每次只向右移动一位. 返回 滑动窗口中的最大值 . 示 ...
- 力扣29(java)-两数相除（中等）
题目: 给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 整数除 ...