JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动，好像没有无穷无尽似的，实际上就是几张图片不停的循环，但是看不出有从最后面切换到最前面的效果，这就是无缝滚动，文字和图片都可以无缝滚动，这里介绍的是图片，文字是同样的原理。
原理
以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，点击向上无缝滚动。
设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚动的关键地方在这：
if(nav.scrollTop==list[list.length-1].offsetTop){
nav.scrollTop=0
}else{
nav.scrollTop++;
}
这里的nav.scrollTop是指当前的可视对象nav的顶端与正在显示的对象ul#img的顶端的距离，通俗一点来说，就是滚动条向下滚动的距离；list[i]就是要显示的图片列表，list[list.length-1]是指最后一张图片，list[list.length-1].offsetTop是指最后一张图片的顶部到它的父元素的顶部的距离，这个距离是不变固定的，父元素的position必须不能是static（默认的），而且也不能是div，否则会跳过这个元素把上一级当成父元素。
当向下滚动的距离与list[list.length-1].offsetTop的距离相等时，即图片5已经划过，到了显示图片1的时候，让滚动的距离瞬间为0，进行切换时由于两张图片是一样的，人观看时察觉不到，故形成了无缝滚动。
可以发现这里重叠了一张图片，是因为当最后一张图片滚动完之后要形成循环，可视区域内一定要有图片否则一片空白，这里设定的可视区域就是一张图片的高度，故重复的是图片1，如果比一张图片高度要大，则需按顺序多重复几张图片列表的图片。
html部分
四个方向：向上、向下、向左、向右的无缝滚动的html部分是一样的，就表现的部分是一样的，即
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul id="img">
<li><img src="../images/img1.jpg" alt="img1"></li>
<li><img src="../images/img2.jpg" alt="img2"></li>
<li><img src="../images/img3.jpg" alt="img3"></li>
<li><img src="../images/img4.jpg" alt="img4"></li>
<li><img src="../images/img5.jpg" alt="img5"></li>
<li><img src="../images/img1.jpg" alt="img1"></li>
</ul>
</nav>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
这里需要注意以下：设定的是5张720*405尺寸图片的循环滚动，但是要实现无缝滚动需在后面重复的添加几张图片，具体几张要根据可视区域是图片高度（向上，向下滚动）或宽度（向左，向右滚动）的几倍来确定，我这里设置可视区域的宽度为405px，故只需要重复一张即可，若假设是500px，则需重复两张，类似这样计算。
css部分
这里以向上滚动为例，其余四个方向的样式是类似的，只有些许地方不一样。这里需要注意几点：
1、nav是可视区域，一定要设置宽高，而且overflow要设置为hidden，否则移动不了；
2、ul#img的position要设置，否则默认为static，会影响offsetTop属性，因为父元素的position不能为static，否则会跳过该元素往上一级寻找；
3、要设置ul#img里面的li元素，否则图片上下都会有2px的空白，影响滚动时的效果。
向上、向下滚动样式
两者样式一样。ul#img的高度要是所有图片的总高度，但是由于li本来就是块级元素是由上往下排列的，不设置ul#img的高度也可以，但是向左或向右移动时，必须设置ul#img的宽度为所有图片的总宽度，这里为保持一致就设置了高度为所有图片的总高度；
*{
padding: 0;
margin: 0;
}
nav {
width: 720px;
height: 405px; /*设置可见部分的高度*/
margin: 40px auto;
border: 5px solid #eee;
overflow: hidden;
}
#img{
width: 720px;
height:2430px;/*设置可见部分的高度*/
position: relative;/*默认是static*/
}
#img li{
width: 720px;
height:405px;/*不设置则上下都会有2px的空白*/
}
向上左、向右滚动样式
两者样式一样。向左、向右滚动时要用float：left让li元素在一行并排显示，而没有用display：inline-block是因为图片这样显示会有空隙，是因为行内元素产生的间隔，故用浮动。这里必须要设置ul#img的宽度为图片的总宽度。
*{
padding: 0;
margin: 0;
}
nav {
width: 720px;
height: 405px; /*设置可见部分的高度*/
margin: 40px auto;
border: 5px solid #eee;
overflow: hidden;
}
#img{
width: 4320px;
height:405px;/*设置可见部分的高度*/
position: relative;/*默认是static*/
}
#img li{
width: 720px;
height:405px;
float:left;
}
JavaScript部分
这里以向上滚动为例，JavaScript代码很简单，往下的滚动就是改变一下scrollTop就行，而左右方向就是将scrollTop变成scrollLeft，offsetTop换成offsetLeft就行。
var nav=document.getElementsByTagName('nav')[0];
var list=document.getElementById('img').getElementsByTagName('li');
function scroll() {
if(nav.scrollTop==list[list.length-1].offsetTop){
nav.scrollTop=0;
}else{
nav.scrollTop++;
}
}
var timer= setInterval(scroll,10);
nav.onmouseover=function(){
clearInterval(timer);
};
nav.onmouseout=function () {
timer=setInterval(scroll,10);//必须得对timer重新赋值
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS左右无缝滚动（一般方法+面向对象方法）
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo
-
Javascript 实现图片无缝滚动
效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 复制代码 代码如下: <style type="text/css"> * { margin: 0; padding: 0; } #div1 { overflow: hidden; width: 71
-
走马灯效果代码js appendChild实现的无缝滚动
*{border:1px solid blue} a{display:block;font-size:10px}; 1,河北, 2,辽宁 3,山东, 4,河南 var t=setInterval(myfunc,1000) function myfunc(){ d.appendChild(d.firstChild)} d.onmouseover=function(){clearInterval(t)} d.onmouseout=function(){t=setInterval(myfunc,100
-
js向上无缝滚动,网站公告效果 具体代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=&q
-
彻底搞懂JS无缝滚动代码
在做个东西要滚动代码 而且是无缝的 搞了半天还是不行 决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600> <table align=top> <tr> <td id=demo1 valign=top> <p>aaaaaaaaaa
-
js 实现无缝滚动 兼容IE和FF
原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间
-
js实现可控制左右方向的无缝滚动效果
本文实例为大家分享了无缝滚动效果JavaScript代码实现,供大家参考,具体内容如下] 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>zzzz</title> <style> *{ margin: 0; padding:0; } body{ width: 1000px; margin: 100px a
-
jcarousellite.js 基于Jquery的图片无缝滚动插件
1.引入JS库,jquery.js脚本和插件脚本jcarousellite.js. 复制代码 代码如下: <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/jcarousellite.js"></script> 2
-
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter