JS實(shí)現(xiàn)動態(tài)無縫輪播

在同學(xué)的幫助下，終于使用純js代碼實(shí)現(xiàn)了動態(tài)輪播，學(xué)無止境加油吧！

創(chuàng)新互聯(lián)專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

效果圖是這樣的，我們需要定義一個div，并放入三張圖片，還需要左右兩個按鈕，以及底下三個按鈕三個div。

先看布局代碼

<div class="banner" id="banner">
    <ul class="clear" >
      <li  ><img src="k1.jpg"></li>
      <li  ><img src="k-2.jpg"></li>
      <li ><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);
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：JS實(shí)現(xiàn)動態(tài)無縫輪播
鏈接地址：http://www.rwnh.cn/article12/ghscdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、用戶體驗(yàn)、網(wǎng)站維護(hù)、ChatGPT、網(wǎng)站導(dǎo)航、Google

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

JS實(shí)現(xiàn)動態(tài)無縫輪播