如何使用js制作動(dòng)態(tài)無(wú)縫輪播？其實(shí)很簡(jiǎn)單，首先，我們來(lái)看一下效果圖：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、撫州網(wǎng)站維護(hù)、網(wǎng)站推廣。

效果圖是這樣的，我們需要定義一個(gè)div，并放入三張圖片，還需要左右兩個(gè)按鈕，以及底下三個(gè)按鈕三個(gè)div。詳細(xì)的代碼請(qǐng)看下文

一、HTML代碼：

二、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;i0){
          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);

看完上文之后是不是覺(jué)得特別簡(jiǎn)單呢？其實(shí)使用js制作動(dòng)態(tài)無(wú)縫輪播并不是很難的，只要用心去看代碼，你們也能輕松實(shí)現(xiàn)。創(chuàng)新互聯(lián)建站資訊中還有很多關(guān)于JS制作的內(nèi)容，如果想了解請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司其它相關(guān)文章！

分享題目：如何使用js制作動(dòng)態(tài)無(wú)縫輪播-創(chuàng)新互聯(lián)
本文URL：http://weahome.cn/article/ddgipo.html