当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现动态无缝轮播

JS实现动态无缝轮播

2020年03月09日  | 移动技术网IT编程  | 我要评论

在同学的帮助下，终于使用纯js代码实现了动态轮播，学无止境加油吧！

效果图是这样的，我们需要定义一个div，并放入三张图片，还需要左右两个按钮，以及底下三个按钮三个div。

先看布局代码

<div class="banner" id="banner">
    <ul class="clear" >
      <li style="left:0" ><img src="k1.jpg"></li>
      <li style="left:100%" ><img src="k-2.jpg"></li>
      <li style="left:100%"><img src="k-3.jpg"></li>
    </ul>
    <div class="pagenav"></div>
    <div class="leftbtn"></div>
    <div class="rightbtn"></div>
</div>

如何是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<li.length;i++){//给图片底下添加按钮
    pagea=document.createelement("a");
    if(i==0){
      pagea.classname="cur";
    }
    pagenav.appendchild(pagea);
  }
  pagenav.addeventlistener('click',pagenavclick,false);
  function pagenavclick(e){
    if(state){
      return;
    }
    e=e||window.event;//兼容性考虑
    for(var i=0;i<li.length;i++){
      if(pagenav.children[i]==e.target){
        index=n;
        var offset=i-n;
        n=i;
        showbtn(n);
        if(offset>0){
          showimg(-100);
        }else{
          showimg(100);
        }
      }
    }
  }
  function showbtn(index){
    for(var z=0;z<li.length;z++){
      pagenav.children[z].classname="";
    }
    pagenav.children[index].classname="cur";
  }
  function showimg(offset){
    clearinterval(timerelem);
    var speed=offset/20;
    timerelem=setinterval(function(){
      state=true;
      if(parseint(li[n].style.left)==0){
        state=false;
        clearinterval(timerelem);
        li[n].style.left="0";
        for(var l=0;l<n;l++){
          li[l].style.left="-100%"
        }
        for(var r=n+1;r<li.length;r++){
          li[r].style.left="100%";
        }
      }else{
        li[n].style.left=parseint(li[n].style.left)+speed+"%";
        li[index].style.left=parseint(li[index].style.left)+speed+"%";
      }
    },100)
  }
  leftbtn.onclick=function(){
    if(state){
      return;
    }
    index=n;
    n--;
    if(n<0){
      n=li.length-1;
      li[n].style.left="-100%";
    }
    showbtn(n);
    showimg(100);
  }
  rightbtn.onclick=function(){
    if(state){
      return;
    }
    index=n;
    n++;
    if(n>li.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);
}

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网