原生JS实现图片无缝滚动方法(附带封装的运动框架)
前端之家收集整理的这篇文章主要介绍了
原生JS实现图片无缝滚动方法(附带封装的运动框架)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
话说轮播图效果是前端er学习JS的必经之路啊，很多同学写的第一个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代码：
js 代码：
其中animate()是封装好的运动框架，最后面附有说明
//克隆
第一张图片 添加在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<aLi2.length;i++){
(function(index){
aLi2[index].onclick = function(){
iNow = index+1;
for(var i=0;i<aLi2.length;i++){
aLi2[i].className = '';
}
aLi2[index].className = 'on';
animate(oUl,{left: -iNowaLi1[0].offsetWidth});
}
})(i);
}
//上一个
prev.onclick=function(){
iNow--;
animate(oUl,{left: -iNow
aLi1[0].offsetWidth},{complete:function(){
if(iNow == 0){
iNow = aLi1.length-2;
oUl.style.left=-aLi1[0].offsetWidthiNow+'px';
}
for(var i=0;i<aLi2.length;i++){
aLi2[i].className = '';
}
aLi2[iNow-1].className = 'on';
}});
}
//下一个
next.onclick=function(){
toNext();
}
function toNext(){
iNow++;
animate(oUl,{complete:function(){
if(iNow == aLi1.length-1){
iNow = 1;
oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
}
for(var i=0;i<aLi2.length;i++){
aLi2[i].className = '';
}
aLi2[iNow-1].className = 'on';
}});
}
//设置定时器
timer = setInterval(function(){
toNext();
},2000);
}
封装的animate()运动框架
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]aaa;
break;
//减速
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name](1-aaa);
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter = 'alpha(opacity='+cur100+')'; //兼容IE8及以下
}else{
obj.style[name]=cur+'px';
}
}
}
n++;
},30);
}
//获取非行间样式
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}
以上这篇原生JS实现图片无缝滚动方法(附带封装的运动框架)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
