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

原生JS实现无缝轮播图片

2023-07-23 01:18:05 313

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

运动插件

functionanimove(obj,distance,speed,callback){//调用的变量目标距离速度回调函数
clearInterval(obj.timer);
obj.timer=setInterval(function(){
letstep=(distance-obj.offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
if(obj.offsetLeft==distance){
clearInterval(obj.timer);
if(callback){
callback();
}
}
obj.style.left=obj.offsetLeft+step+'px';
},speed)
}

CSS代码

*{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
.box{
width:1226px;
height:460px;
margin:100pxauto;
position:relative;
overflow:hidden;
}
.pic-box{
width:4904px;
position:absolute;
}
.pic-box>li{
float:left;
}
.point{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
}
.point>li{
float:left;
width:8px;
height:8px;
border:1pxsolidblueviolet;
margin:04px;
border-radius:50%;
}
.point>.active{
background-color:orange;
}
.left-btn,
.right-btn{
width:50px;
height:40px;
background-color:rgba(0,0,0,.5);
text-align:center;
line-height:40px;
font-size:20px;
color:white;
position:absolute;
top:50%;
transform:translateY(-50%);
}
.left-btn{
left:0;
}
.right-btn{
right:0;
}

HTML代码

js代码

letpicbox=document.querySelector('.pic-box');
letpic=document.querySelectorAll('.pic-box>li');//由于获取的不是动态的所以之后的克隆并不会使这个变量发生改变
letpoint=document.querySelector('.point');
letleftbtn=document.querySelector('.left-btn');
letrightbtn=document.querySelector('.right-btn');
letcarouselindex=0;
//通过for循环生成小圆点并将圆点添加到ul里
for(leti=0;ipic.length){//如果索引大于图片数量由于数量大小获取的是静态的所以长度不会因为克隆变化而变化
picbox.style.left="0px";//如果大于索引说明此时要离开克隆的那张图此时迅速将left值设置为0
carouselindex=1;//然后将索引设置为1
}
carousel(carouselindex);//这时候就在left为0的位置过渡到索引1的位置实现无缝轮播的效果
});
leftbtn.addEventListener('click',function(){//左边点击事件
carouselindex--;//减减
if(carouselindex<0){//如果索引值小于0
carouselindex=2;//将索引值设置为2
picbox.style.left="-3678px";//将位置迅速变换为第四张图的位置（克隆的图）
}
carousel(carouselindex);//由克隆的图过渡到索引为2的图（第三张图）
})

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

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

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

返回顶部
3162201930
czq8825@qq.com

原生JS实现无缝轮播图片

热门推荐

随机推荐