微客导航 » 文章资讯 » 原生js实现无缝轮播图

原生js实现无缝轮播图

2023-08-03 06:19:03 174

本文实例为大家分享了js实现无缝轮播图的具体代码，供大家参考，具体内容如下

先上效果图

原理图

如图可见，是页面按顺序依次显示5张图片，包裹这五张图片的外层的盒子，我们叫ul，通过向左或右移动不同距离，实现在视图中显示的不同的图片，实现轮播，而同时下面的分页小球需要根据当前显示的内容进行点亮；

而无缝轮播图需要在第五张图片后面再加上第一张图片，这样通过右侧箭头，向右切换，当页面切换到第六张时，也就是最后一张图片，此时需要将ul的位置设置为第一张图的位置，然后从第一张图片滑动到第二张，形成一个无缝过渡；

同理，样通过左侧箭头，向左切换，已经显示到第一张图片时，再向左切换，ul会设置为到第五张图的位置，形成一个无缝过渡

html结构




页面1
页面2
页面3
页面4
页面5
页面1


1
2
3
4
5

< >

js代码

//获取页面元素
varul=document.getElementsByTagName("ul")[0];
varinner=document.getElementsByClassName("inner")[0];
varcircle=document.getElementsByClassName("circle")[0];
varspanArr=circle.children;
vardirection=document.getElementsByClassName("direction")[0];
vardirChid=direction.children;
varinnerWidth=inner.offsetWidth;
//两个定时器（一个记录图片，一个记录小圆球）
vardindex=0;
varspan=0;
//varulNewLi=ul.children[0].cloneNode(true);
//ul.appendChild(ulNewLi);
for(vari=0;ispanArr.length){
ul.style.left=0;
dindex=1;
}
animation(ul,-dindex*innerWidth);
span++;
if(span>spanArr.length-1){
span=0;
}
for(vark=0;k0?Math.ceil(step):Math.floor(step);
//当前位置=盒子的位置+步长
leader=leader+step;
ele.style.left=leader+"px";
if(ele.offsetLeft===target){
clearInterval(ele.timer);
}
},30)

}

精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

原生js实现无缝轮播图

热门推荐

随机推荐