js实现无缝轮播图

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

CSS样式：

 #box{width: 1000px;height: 375px;border: 3px solid black;
 margin: 30px auto;position: relative;overflow: hidden;}
 #box .img{position: absolute;left: 0;top: 0;}
 #box .img img{width: 1000px;height: 375px;float: left;}
 #box .btn input{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：

设置动画：

function move(ele,attr,target){
 clearInterval(ele.t);
 ele.t=setInterval(()=>{
 let iNow;
 if(attr=="opacity"){
 iNow=getStyle(ele,attr)*100;
 }else{
 iNow=parseInt(getStyle(ele,attr));
 }
 let speed=(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)
}
function getStyle(ele,attr){
 if(ele.currentStyle){
 return ele.currentStyle[attr];
 }else{
 return getComputedStyle(ele,false)[attr];
 }
}

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

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