作者:u47871838 | 来源:互联网 | 2020-09-05 23:39
本文为大家介绍了js实现动态无缝轮播图的方法,具有一定的参考价值,希望可以帮助到大家。我们需要定义一个div,并放入三张图片,还需要左右两个按钮,以及底下三个按钮三个div。
效果图是这样的,我们需要定义一个div,并放入三张图片,还需要左右两个按钮,以及底下三个按钮三个div。
HTML代码:
推荐教程:Javascript教程
css代码:
.clear:after{
display:block;
content:"";
clear:both;
}
.banner{
width: 100%;
position:relative;
height: 390px;
}
.banner ul{
width: 100%;
height: 390px;
list-style-type:none;
overflow: hidden;
}
.banner ul li{
width: 100%;
position: absolute;
}
.pageNav{
position: absolute;
left:50%;
bottom:20px;
transform: translateX(-50%);
}
.pageNav a{
display:inline-block;
margin:0 5px;
width: 20px;
height: 20px;
background-color:#fff;
border-radius:50%;
border:2px solid #000;
cursor:pointer;
}
.pageNav a.cur{
background-color:red;
}
.leftBtn, .rightBtn{
position:absolute;
top: 50%;
transform:translateY(-50%);
width: 40px;
height: 50px;
background-color:rgba(0, 0, 0, 0.5);
cursor:pointer;
}
.leftBtn{
left:0;
}
.rightBtn{
right:0;
}
.leftBtn:hover,.rightBtn:hover{
background-color:rgba(0, 0, 0, 0.8);
}
js代码:
var banner=document.getElementById("banner");
var ul=banner.getElementsByTagName("ul")[0];
var li=ul.getElementsByTagName("li");
var pageNav=banner.getElementsByClassName("pageNav")[0],leftBtn=document.getElementsByClassName("leftBtn")[0],rightBtn=document.getElementsByClassName("rightBtn")[0],n=0,index=0,timerElem=null,state=false;
for(var i=0;i
0){
showImg(-100);
}else{
showImg(100);
}
}
}
}
function showBtn(index){
for(var z=0;zli.length-
1){
n=0;
li[n].style.left="100%";
}
showBtn(n);
showImg(-100);
}
var timer;
timer=setInterval(autoLunbo,3000);
function autoLunbo(){
rightBtn.onclick();
}
banner.Onmouseover=function(){
clearInterval(timer);
}
banner.Onmouseout=function(){
timer=setInterval(autoLunbo,3000);
}更多炫酷Javascript特效代码,尽在:js特效大全
以上就是js如何实现动态无缝轮播的详细内容,更多请关注 第一PHP社区 其它相关文章!