js實現(xiàn)無縫輪播圖效果

更新時間：2020年03月09日 11:41:21 作者：甘樂2333

這篇文章主要為大家詳細介紹了js實現(xiàn)無縫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)無縫輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

//Utils.js
 
//封裝 預(yù)加載圖片
var Utils=(function () {
  return {
    //SSS
    loadImg:function (srcList,callBack) {//圖片地址 回調(diào)函數(shù)
      var img=new Image();
      img.num=0;//初始化num為0 圖片數(shù)
      img.imgList=[];//存放圖片
      img.srcList=srcList;
      img.callBack=callBack;//回調(diào)函數(shù)
      img.addEventListener("load",this.loadHandler);//加載load
      img.src="./img/"+srcList[img.num];//拼接圖片地址
    },
    loadHandler:function (e) {
     //this 指代img
     /*cloneNode該方法將復(fù)制并返回調(diào)用它的節(jié)點的副本。
     * 如果傳遞給它的參數(shù)是 true，它還將遞歸復(fù)制當前節(jié)點的所有子孫節(jié)點。
     否則（也就是默認值，或者false），它只復(fù)制當前節(jié)點。*/
      this.imgList.push(this.cloneNode(false));//將img圖片尾插入imgList數(shù)組
      this.num++;
      if(this.num>=this.srcList.length){//圖片數(shù)>=srcList數(shù)組(保存圖片地址)的長度
        this.callBack(this.imgList);//將數(shù)組傳入回調(diào)函數(shù)
        return;
      }
      //事件偵聽沒有被刪除,只需更改src,監(jiān)聽加載load后觸發(fā)該事件,進入該函數(shù)this.loadHandler
      this.src="./img/"+this.srcList[this.num];
    }
  }
})();

全部代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>無縫輪播圖</title>
  <script src="js/Utils.js"></script>
</head>
<body>
  <script>
    //無縫輪播圖,全JS
    /*
    *  1\輪播圖大容器-->圖片容器,左右按鈕,小圓點
    *  2\點擊按鈕,標志當前挪動圖片索引,移動的方向
    *  3\點擊小圓點,標志當前挪動圖片的索引,移動的方向
    *  4\創(chuàng)建目標圖片放置在當前圖片的前或后
    *  5\移動圖片容器到目標圖片位置后,刪除前或后原來的圖片
    * */
    var bnList,imgList,imgCon,ul,pre;//存儲 左右按鈕名   圖片名   圖片容器   下方圓點標簽容器
    var position=0,//圖片的序號
      direction="left",//方向
      speed=30,
      time=300,
      autoBoolean=false,
      playBoolean=false;
 
    const WIDTH=1200,//常量定義輪播圖高寬
       HEIGHT=400;
 
    init();
    function init() {
     //調(diào)用Utils中的loadImg方法 將圖片名數(shù)組 和回調(diào)函數(shù)名傳入
      Utils.loadImg(["left.png","right.png","a.jpeg","b.jpeg","c.jpeg","d.jpeg","e.jpeg"],createCarousel);
    }
 
    function createCarousel(list) {//創(chuàng)建輪播圖
      bnList=list.splice(0,2);//將左右移動圖標名從list數(shù)組中移除，添入bnList數(shù)組
      imgList=list;//將圖片名添入數(shù)組imgList
      imgList.forEach(function (t) {//遍歷數(shù)組，給每個img元素添加寬高
          t.style.width=WIDTH+"px";
          t.style.height=HEIGHT+"px";
      });
      var carousel=ce("div",{//調(diào)用函數(shù)ce創(chuàng)建div并添加樣式
        width:WIDTH+"px",
        height:HEIGHT+"px",
        position:"relative",
        margin:"auto",
        overflow:"hidden",
        backgroundColor:"rgba(255,0,0,0.3)"
      });
      console.log(carousel);//carousel為最外層div容器，包括輪播圖容器，圓點標簽， 左右按鈕
      createImgCon(carousel);//調(diào)用函數(shù)createImgCon在 carousel中創(chuàng)建輪播圖圖片容器， 傳入carousel為父容器
      createBn(carousel);//調(diào)用函數(shù)createBn中創(chuàng)建左右按鈕， 傳入carousel為父容器
      createDot(carousel);//調(diào)用函數(shù)createDot中創(chuàng)建下方圓點標簽， 傳入carousel為父容器
      document.body.appendChild(carousel);//在body中插入div carousel
      carousel.addEventListener("mouseenter",mouseHandler);//給div carousel添加鼠標進入事件
      carousel.addEventListener("mouseleave",mouseHandler);//給div carousel添加鼠標離開事件
      //下方圓點標簽距左邊距
      ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";  
      changeDot();
      setInterval(animation,16);//設(shè)置周期執(zhí)行函數(shù)
    }
 
    function mouseHandler(e) {//鼠標停止，開始輪播圖自動播放
      if(e.type==="mouseenter"){//鼠標進入停止自動播放，重置time計時
        autoBoolean=false;
        time=300;
      }else if(e.type==="mouseleave"){//鼠標離開開始自動播放
        autoBoolean=true;
      }
    }
 
    function createImgCon(parent) {//創(chuàng)建輪播圖容器div
      imgCon=ce("div",{//調(diào)用ce創(chuàng)建div
        width:WIDTH+"px",
        height:HEIGHT+"px",
        position:"absolute",
        left:"0px"
      });
      imgCon.appendChild(imgList[position]);//在創(chuàng)建的div imgCon 中添加圖片
      parent.appendChild(imgCon);//在傳來的父元素div中添加新建的div imgCon
    }
    
    function createBn(parent) {//創(chuàng)建左右按鈕 接受傳來的父元素
      bnList.forEach(function (t,index) {//遍歷數(shù)組bnList
        Object.assign(t.style,{
          position:"absolute",
          left:index===0 ? "20px" : "none",
          right:index===1 ? "20px" : "none",
          top:(HEIGHT-t.height)/2+"px"
        });
        t.addEventListener("click",bnClickHandler);//按鈕添加點擊監(jiān)聽事件
        parent.appendChild(t);//在傳來的父元素中添加左右按鈕
      })
    }
    
    function createDot(parent) {//創(chuàng)建下方圓點標簽
       ul=ce("ul",{//調(diào)用ce創(chuàng)建ul，添加樣式
        listStyle:"none",
        position:"absolute",
        bottom:"20px",
        margin:"0px",
        padding:"0px"
      });
      imgList.forEach(function (t,index) {//遍歷imgList，有幾張圖創(chuàng)建幾個li
        var li=ce("li",{//新建li，添加樣式
          float:"left",
          width:"18px",
          height:"18px",
          borderRadius:"9px",
          border:"1px solid rgba(255,0,0,0.8)",
          marginLeft: index===0 ? "0px" : "10px"
        });
        ul.appendChild(li);//ul中插入li
      });
      ul.addEventListener("click",dotClickHandler);//給ul添加監(jiān)聽單擊時間 事件委托
      parent.appendChild(ul);//在父元素中插入ul
    }
 
    function bnClickHandler(e) {//左右移點擊移動圖片
      if(playBoolean) return;
      if(bnList.indexOf(this)===0){//點擊左移按鈕
        position--;//圖片序號--
        direction="right";//圖片方向向右
        if(position<0) position=imgList.length-1;//如果在第0張點左移，position為最后一張圖的序號
      }else{//點擊右移按鈕
        position++;//圖片序號++
        direction="left";//圖片方向向左
        if(position>imgList.length-1) position=0;//如果在最后1張點右移，position為第一張圖的序號
      }
      createNextImg();//創(chuàng)建下一張圖片
    }
  
    
    function dotClickHandler(e) {//圓點標簽點擊移動圖片
      if(playBoolean) return;
      if(e.target.nodeName!=="LI") return;//點擊的不是li return
      var arr=Array.from(this.children);//this=ul
      var index=arr.indexOf(e.target);//index存點擊的li在arr中的下標
      if(index===position) return;//如果是當前這個位置點,不操作
      if(index>position){//如果點擊的大于當前
        direction="left";//圖片方向向左
      }else{//如果點擊的小于當前
        direction="right";//圖片方向向右
      }
      position=index;//position賦值為點擊的li序號
      createNextImg();//創(chuàng)建下一張圖片
    }
    
    function createNextImg() {//創(chuàng)建下一張圖片
      imgCon.style.width=WIDTH*2+"px";//將輪播圖容器寬度*2
      if(direction==="left"){//如果圖片向左運動
        imgCon.appendChild(imgList[position]);//在當前圖片后面添加子元素
      }else if(direction==="right"){//如果圖片向右運動
        imgCon.insertBefore(imgList[position],imgCon.firstElementChild);//在第一張圖片前面添加子元素
        imgCon.style.left=-WIDTH+"px";//移動原有圖片容器的位置左右一張圖片寬度
      }
      playBoolean=true;//圖片加載完設(shè)置為true
      changeDot();//改變下方圓形標簽的顏色
    }
 
    function changeDot() {//改變下方圓形標簽的顏色
      if(pre){
        pre.style.backgroundColor="rgba(255,0,0,0)";//顏色初始化為透明
      }
      pre=ul.children[position];//獲取當前輪播圖對應(yīng)li
      pre.style.backgroundColor="rgba(255,0,0,0.5)";//顯示該li的顏色
    }
    
    function animation() {
      imgPlay();//圖片移動
      autoPlay();//自動移動
    }
    
    function imgPlay() {
      if(!playBoolean) return; //為false return
      if(direction==="right"){//圖片右移
        imgCon.style.left=imgCon.offsetLeft+speed+"px";//圖片以speed的速度向右劃過
        if(imgCon.offsetLeft>=0){//運動到輪播圖框停止移動
          imgCon.style.left="0px";
          playBoolean=false;
          imgCon.lastElementChild.remove();//移走上一張圖片
          imgCon.style.width=WIDTH+"px";//重置輪播圖容器寬度
        }
      }else if(direction==="left"){//圖片左移
        imgCon.style.left=imgCon.offsetLeft-speed+"px";//圖片以speed的速度向左劃過
        if(imgCon.offsetLeft<=-WIDTH){//運動到輪播圖框左一張圖片的寬度處停止移動
          playBoolean=false;
          imgCon.firstElementChild.remove();//移走上一張圖片
          imgCon.style.left="0px";//重置輪播圖容器位置
          imgCon.style.width=WIDTH+"px";//重置輪播圖容器寬度
        }
      }
 
    }
    
    function autoPlay() {//自動輪播
      if(!autoBoolean) return;
      time--;
      if(time>0) return;
      time=200;
      var evt=new MouseEvent("click");
      bnList[1].dispatchEvent(evt);//dispatchEvent事件觸發(fā)器，觸發(fā)bnList[1]的click事件
    }
    
    function ce(type,style) { //創(chuàng)建標簽元素并添加樣式 (創(chuàng)建元素類型 ,添加的css樣式)
      var elem=document.createElement(type);
   /*Object.assign方法用來將源對象（source）的所有可枚舉屬性，
      復(fù)制到目標對象（target）。它至少需要兩個對象作為參數(shù)，
      第一個參數(shù)是目標對象，后面的參數(shù)都是源對象。*/
      Object.assign(elem.style,style);
      return elem;
    }
  </script>
</body>
</html>

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: