How to implement dynamic seamless carousel in js

First, let’s take a look at the rendering:

The rendering is like this, we need to define a div and put To import three pictures, you need two buttons on the left and right, as well as three buttons and three divs at the bottom.

HTML code:

<div class="banner" id="banner">
    <ul class="clear" >
      <li style="left:0" ><img  src="k1.jpg" alt="How to implement dynamic seamless carousel in js" ></li>
      <li style="left:100%" ><img  src="k-2.jpg" alt="How to implement dynamic seamless carousel in js" ></li>
      <li style="left:100%"><img  src="k-3.jpg" alt="How to implement dynamic seamless carousel in js" ></li>
    </ul>
    <div class="pageNav"></div>
    <div class="leftBtn"></div>
    <div class="rightBtn"></div>
</div>

Recommended tutorial: javascript tutorial

css code:

.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 code:

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(&#39;click&#39;,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);
}

More cool javascript special effects codes, all in: js special effects collection

The above is the detailed content of How to implement dynamic seamless carousel in js. For more information, please follow other related articles on the PHP Chinese website!