好资源导航 » 文章资讯 » js实现无缝轮播图

js实现无缝轮播图

2023-07-29 14:40:04 155

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

CSS样式：


#box{width:1000px;height:375px;border:3pxsolidblack;
margin:30pxauto;position:relative;overflow:hidden;}
#box.img{position:absolute;left:0;top:0;}
#box.imgimg{width:1000px;height:375px;float:left;}
#box.btninput{border-radius:50%;border:0;width:40px;
height:40px;font-size:25px;z-index:5;top:165px;position:absolute;}
#left{left:0;}
#right{right:0;}

HTML结构：







//利用第一张图，达到无缝轮播的视觉效果

"/>

JavaScript：

设置动画：

functionmove(ele,attr,target){
clearInterval(ele.t);
ele.t=setInterval(()=>{
letiNow;
if(attr=="opacity"){
iNow=getStyle(ele,attr)*100;
}else{
iNow=parseInt(getStyle(ele,attr));
}
letspeed=(target-iNow)/8;
speed=speed<0?Math.floor(speed):Math.ceil(speed);
if(iNow==target){
clearInterval(ele.t);
}else{
if(attr=="opacity"){
ele.style.opacity=(iNow+speed)/100;
}else{
ele.style[attr]=iNow+speed+"px";
}
}
},30)
}
functiongetStyle(ele,attr){
if(ele.currentStyle){
returnele.currentStyle[attr];
}else{
returngetComputedStyle(ele,false)[attr];
}
}

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

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

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

返回顶部
514930285
czq8825@qq.com

js实现无缝轮播图

热门推荐

随机推荐