JS實現(xiàn)橫向輪播圖（中級版）

更新時間：2020年01月18日 11:47:28 作者：SSSkyCong

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

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

描述：

輪播圖，中級，橫向buton或者底部數(shù)字控制輪播，可以實現(xiàn)自動輪播（注釋了，使用的話將其注釋消掉），解決了初級版本的點1再點5時多張圖片滑動的問題，核心只有兩張圖在切換，加入了圖片加載。

效果：

代碼：

js文件：

/*
* 工廠模式
* */
 
var Method=(function () {
 return {
  loadImage:function (arr,callback) {
   var img=new Image();
   img.arr=arr;
   img.list=[];
   img.num=0;
   img.callback=callback;
//   如果DOM對象下的事件偵聽沒有被刪除掉，將會常駐堆中
//   一旦觸發(fā)了這個事件需要的條件，就會繼續(xù)執(zhí)行事件函數(shù)
   img.addEventListener("load",this.loadHandler);
   img.self=this;
   img.src=arr[img.num];
  },
 
  loadHandler:function (e) {
   this.list.push(this.cloneNode(false));
   this.num++;
   if(this.num>this.arr.length-1){
    this.removeEventListener("load",this.self.loadHandler);
    this.callback(this.list);
    return;
   }
   this.src=this.arr[this.num];
  },
 
  $c:function (type,parent,style) {
   var elem=document.createElement(type);
   if(parent) parent.appendChild(elem);
   for(var key in style){
    elem.style[key]=style[key];
   }
   return elem;
  }
 }
})();

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/Method.js"></script>
</head>
<body>
 <script>
  var imgCon,ul,prevLi;
  var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
  var position=0;
  var direction="";
  var carouselBool=false;
  var autoBool=false;
  var time=240;
  const WIDTH=1200;
  const HEIGHT=400;
  init();
  function init() {
   createCarousel();
   createLiAndImg();
   changeLi();
   setInterval(animation,16)
  }
 
  function createCarousel() {//創(chuàng)建默認(rèn)的div模板 用于裝圖片
   var carousel=Method.$c("div",document.body,{
    width: WIDTH+"px",
    height: HEIGHT+"px",
    position: "relative",
    margin: "auto",
    overflow:"hidden"
   });
   carousel.addEventListener("mouseenter",mouseHandler);
   carousel.addEventListener("mouseleave",mouseHandler);
   imgCon=Method.$c("div",carousel,{//圖片輪播 div
    width: WIDTH+"px",
    height: HEIGHT+"px",
    position:"absolute",
    left: 0,
    fontSize: 0
   });
   ul=Method.$c("ul",carousel,{//裝5個按鈕的ul
    position: "absolute",
    bottom: "20px",
    listStyle: "none",
    margin: "auto"
   });
   var leftBn=Method.$c("img",carousel,{//左 按鈕
    position: "absolute",
    left: "20px",
    top:"170px"
   });
   leftBn.src="img/left.png";
   var rightBn=Method.$c("img",carousel,{//右 按鈕
    position: "absolute",
    right: "20px",
    top:"170px"
   });
   rightBn.src="img/right.png";
   leftBn.addEventListener("click",clickHandler);
   rightBn.addEventListener("click",clickHandler)
 
  }
  function createLiAndImg() {
   for(var i=0;i<arr.length;i++){//arr 事先裝好了 5個圖片
    var li=Method.$c("li",ul,{//每個li的數(shù)據(jù)
     width: "20px",
     height: "20px",
     border:"1px solid red",
     borderRadius:"10px",
     float:"left",
     marginLeft:"8px"
    });
    li.num=i;
    li.addEventListener("click",liClickHandler);
   }
   ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
   var img=Method.$c("img",imgCon,{
    width: WIDTH+"px",
    height: HEIGHT+"px"
   });
   img.src=arr[position];
  }
 
  function mouseHandler(e) {
   e = e || window.event;
   if(e.type==="mouseenter"){//鼠標(biāo)劃上 自動暫停
    autoBool=false;
   }else if(e.type==="mouseleave"){//鼠標(biāo)離開 自動開始
    autoBool=true;
   }
  }
 
  function clickHandler(e) {//左右button的鍵位判斷 點擊事件
   e = e || window.event;
   if(carouselBool) return;
   if(~this.src.indexOf("left")){
    position--;
    if(position<0) position=arr.length-1;
    direction="right";
   }else{
    position++;
    if(position>arr.length-1) position=0;
    direction="left";
   }
 
   createCarouselImg();
  }
 
  function liClickHandler(e) {
   e = e || window.event;
   if(carouselBool) return;
   if(this.num===position) return;
   if(this.num>position){
    direction="left";
   }else{
    direction="right";
   }
   position=this.num;
   createCarouselImg();
  }
  
  function createCarouselImg() {
   if(direction!=="left" && direction!=="right")return;
   var img=Method.$c("img",null,{
    width: WIDTH+"px",
    height: HEIGHT+"px"
   });
   img.src=arr[position];
   imgCon.style.width=WIDTH*2+"px";
   if(direction==="left"){
    imgCon.appendChild(img);
   }else if(direction==="right"){
    imgCon.insertBefore(img,imgCon.firstElementChild);
    imgCon.style.left=-WIDTH+"px";
   }
   changeLi();
   carouselBool=true;
  }
 
  function changeLi() {
   if(prevLi){
    prevLi.style.backgroundColor="rgba(255,0,0,0)";
   }
   prevLi=ul.children[position];
   prevLi.style.backgroundColor="rgba(255,0,0,0.5)";
  }
  
  function animation() {
   carouselMovie();
   carouselAuto();
  }
  
  function carouselMovie() {
   if(!carouselBool) return;
   if(direction==="left"){
    if(imgCon.offsetLeft<=-WIDTH){
     carouselBool=false;
     imgCon.firstElementChild.remove();
     imgCon.style.left="0px";
     return;
    }
    imgCon.style.left=imgCon.offsetLeft-40+"px";
    return;
   }
   if(imgCon.offsetLeft>=0){
    carouselBool=false;
    imgCon.lastElementChild.remove();
    return;
   }
   imgCon.style.left=imgCon.offsetLeft+30+"px";
  }
  /*
  * 自動輪播函數(shù)
  * 1、如果當(dāng)前autoBool是false，就不進行自動輪播
  *  這個變量是鼠標(biāo)進入輪播圖時是false，離開時
  *  才會變化為false
  * 2、讓time--，因為這個函數(shù)沒16毫秒執(zhí)行一次，如果
  * 每次進來就讓time-1，然后判斷time是否小于等于0，如果
  * 小于等于0，說明這個函數(shù)已經(jīng)進入了240次，每次16毫米，
  * 合計就是4秒鐘。這樣可以控制讓輪播圖每4秒自動播放下張
  * 圖片
  * 3、如果time小于等于0，就重新讓time等于240，等待下次進入
  * 4、設(shè)置圖片播放定位+1，如果大于了圖片的數(shù)量，就讓它為0
  * 5、設(shè)置輪播圖方向是向左運動
  * 6、執(zhí)行創(chuàng)建輪播圖片，并且繼續(xù)后面的任務(wù)
  *
  *
  *
  * */
  function carouselAuto() {
   if(!autoBool)return;
   time--;
   if(time>0)return;
   //當(dāng)time減到0時，就不繼續(xù)減了，進入下面
   time=240;
   position++;
   if(position>arr.length-1) position=0;
   direction="left";
   createCarouselImg();
  }
 </script>
</body>
</html>

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

您可能感興趣的文章: