js实现无缝轮播图
本文实例为大家分享了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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。