如何使用原生JS实现图片无缝滚动
小编给大家分享一下如何使用原生JS实现图片无缝滚动，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联建站成立以来不断整合自身及行业资源、不断突破观念以使企业策略得到完善和成熟，建立了一套“以技术为基点，以客户需求中心、市场为导向”的快速反应体系。对公司的主营项目，如中高端企业网站企划 / 设计、行业 / 企业门户设计推广、行业门户平台运营、成都App定制开发、成都做手机网站、微信网站制作、软件开发、BGP机房服务器托管等实行标准化操作，让客户可以直观的预知到从创新互联建站可以获得的服务效果。
js有什么特点
1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，js不仅可以创建对象，也能使用现有的对象。
首先我们要实现的效果有以下几点：
小圆点：点击小圆点显示与之对应的图片
向左和向右按钮：点击向左按钮图片向后运动，点击向右按钮图片向前运动
定时器：每隔 2s 自动播放
主要难点在于：
当图片运动到最后一张，点击向右的按钮时，应该显示第一张；
当前显示的是第一张，点击向左的按钮时，应该显示最后一张；
思路：
1、先将第一张图片复制 添加到 ul 最后面，将最后一张图片复制 添加到 ul 最前面（此时 ul 的第一张图片是pic3，最后一张图片是pic0）；
2、当图片(ul)运动到pic3，继续向前运动，运动到最后一张pic0时，瞬间把 ul 拉回到第二张图片pic0的位置，然后在继续向前运动；
3、当图片(ul)向后运动到第一张图片pic3时，瞬间把 ul 拉回到倒数第二张图片pic3的位置。
4、还有非常关键的一点：定义iNow变量，用于对应当前显示的图片与ol中的小圆点，并且可以用来关联 ul 的位置。
html代码：
<
>
css代码：
*{margin: 0; padding: 0;}
li{ list-style: none;}
#tab{
width: 670px;
height: 240px;
border: 1px solid #ccc;
margin: 50px auto;
position: relative;
}
#tab ul{
width: 2680px;
height: 240px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#tab ul li{
float: left;
width: 670px;
}
#tab ul li img{
width: 670px;
}
#tab ol{
width: 80px;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -40px;
overflow: hidden;
}
#tab ol li{
float: left;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
margin: 5px;
cursor: pointer;
}
#tab ol .on{
background: #f00;
}
#tab .prev,#tab .next{
display: none;
width: 40px;
height: 60px;
background: rgba(0,0,0,.3);
filter:alpha(opacity:30);
text-decoration: none;
text-align: center;
line-height: 60px;
font-size: 30px;
color: #fff;
position: absolute;
top: 50%;
margin-top: -30px;
}
#tab .prev{
left: 0;
}
#tab .next{
right: 0;
}js 代码：
其中animate()是封装好的运动框架，最后面附有说明
window.onload = function(){
var oTab = document.getElementById('tab');
var oUl = oTab.getElementsByTagName('ul')[0];
var aLi1 = oUl.children;
var oOl = oTab.getElementsByTagName('ol')[0];
var aLi2 = oOl.children;
var prev = document.getElementById('prev');
var next = document.getElementById('next');
//设置ul的初始位置
var iNow = 1;
oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
//定时器
var timer = null;
//克隆第一张图片 添加在ul的最后面
var oLi1 = aLi1[0].cloneNode(true);
//克隆最后一张图片 添加在ul的最前面
var oLi2 = aLi1[aLi1.length-1].cloneNode(true);
oUl.appendChild(oLi1);
oUl.insertBefore(oLi2,aLi1[0]);
oUl.style.width = aLi1[0].offsetWidth*aLi1.length+"px";
//鼠标移入tab: 关闭定时器，左右按钮显示
oTab.onmouseover = function(){
clearInterval(timer);
prev.style.display = 'block';
next.style.display = 'block';
}
//鼠标移出tab: 开启定时器，左右按钮隐藏
oTab.onmouseout = function(){
timer = setInterval(function(){
toNext();
},2000);
prev.style.display = 'none';
next.style.display = 'none';
}
//点击小圆点
for(var i=0;i封装的animate()运动框架
/*
* 参数说明:
* obj: 运动对象
* json(json形式): 需要修改的属性
* options(json形式):
* duration: 运动时间
* easing: 运动方式（匀速、加速、减速）
* complete: 运动完成后执行的函数
*/
function animate(obj,json,options){
var options=options || {};
var duration=options.duration || 500; //运动时间,默认值为500ms;
var easing=options.easing || 'linear'; //运动方式,默认为linear匀速
var start={};
var dis={};
for(var name in json){
start[name]=parseFloat(getStyle(obj,name)); //起始位置
dis[name]=json[name]-start[name]; //总距离
}
var count=Math.floor(duration/30); //总次数
var n=0; //次数
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(n>count){
clearInterval(obj.timer);
options.complete && options.complete();
}else{
for(var name in json){
switch(easing){
//匀速
case 'linear':
var a=n/count;
var cur=start[name]+dis[name]*a; //当前位置
break;
//加速
case 'ease-in':
var a=n/count;
var cur=start[name]+dis[name]*a*a*a;
break;
//减速
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name]*(1-a*a*a);
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter = 'alpha(opacity='+cur*100+')'; //兼容IE8及以下
}else{
obj.style[name]=cur+'px';
}
}
}
n++;
},30);
}
//获取非行间样式
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}以上是“如何使用原生JS实现图片无缝滚动”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文标题：如何使用原生JS实现图片无缝滚动
网址分享：http://kswjz.com/article/jiesih.html
