原生JS实现图片无缝滚动方法(附带封装的运动框架)

2023-09-23 18:38:05 345

话说轮播图效果是前端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代码：

*{margin:0;padding:0;}
li{list-style:none;}
#tab{
width:670px;
height:240px;
border:1pxsolid#ccc;
margin:50pxauto;
position:relative;
}
#tabul{
width:2680px;
height:240px;
position:absolute;
left:0;
top:0;
overflow:hidden;
}
#tabulli{
float:left;
width:670px;
}
#tabulliimg{
width:670px;
}
#tabol{
width:80px;
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
overflow:hidden;
}
#tabolli{
float:left;
width:10px;
height:10px;
background:#ccc;
border-radius:50%;
margin:5px;
cursor:pointer;
}
#tabol.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(){
varoTab=document.getElementById('tab');
varoUl=oTab.getElementsByTagName('ul')[0];
varaLi1=oUl.children;
varoOl=oTab.getElementsByTagName('ol')[0];
varaLi2=oOl.children;
varprev=document.getElementById('prev');
varnext=document.getElementById('next');
//设置ul的初始位置
variNow=1;
oUl.style.left=-aLi1[0].offsetWidth*iNow+'px';
//定时器
vartimer=null;

//克隆第一张图片添加在ul的最后面
varoLi1=aLi1[0].cloneNode(true);
//克隆最后一张图片添加在ul的最前面
varoLi2=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(vari=0;i
封装的animate()运动框架
/*
*参数说明:
*obj:运动对象
*json(json形式):需要修改的属性
*options(json形式):
*duration:运动时间
*easing:运动方式（匀速、加速、减速）
*complete:运动完成后执行的函数
*/
functionanimate(obj,json,options){
varoptions=options||{};
varduration=options.duration||500;//运动时间,默认值为500ms;
vareasing=options.easing||'linear';//运动方式,默认为linear匀速
varstart={};
vardis={};

for(varnameinjson){
start[name]=parseFloat(getStyle(obj,name));//起始位置
dis[name]=json[name]-start[name];//总距离
}

varcount=Math.floor(duration/30);//总次数
varn=0;//次数

clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(n>count){
clearInterval(obj.timer);
options.complete&&options.complete();
}else{
for(varnameinjson){
switch(easing){
//匀速
case'linear':
vara=n/count;
varcur=start[name]+dis[name]*a;//当前位置
break;
//加速
case'ease-in':
vara=n/count;
varcur=start[name]+dis[name]*a*a*a;
break;
//减速
case'ease-out':
vara=1-n/count;
varcur=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);
}
//获取非行间样式
functiongetStyle(obj,sName){
return(obj.currentStyle||getComputedStyle(obj,false))[sName];
}

以上这篇原生JS实现图片无缝滚动方法(附带封装的运动框架)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

原生JS实现图片无缝滚动方法(附带封装的运动框架)

热门推荐

随机推荐