溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

JavaScript中怎么實(shí)現(xiàn)縱向輪播圖

發(fā)布時(shí)間：2021-08-10 14:47:23 來(lái)源：億速云 閱讀：118 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

JavaScript中怎么實(shí)現(xiàn)縱向輪播圖，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

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對(duì)象下的事件偵聽(tīng)沒(méi)有被刪除掉，將會(huì)常駐堆中//      一旦觸發(fā)了這個(gè)事件需要的條件，就會(huì)繼續(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>  <style>    #con,#bgImg,#bgImg img    {      width: 100%;      height: 500px;    }    #con    {      position: relative;      margin: auto;    }    #bgImg{      position: absolute;    }    #bgImg img{      opacity: 1;      transition: all 1s;      position: absolute;      left:0;      top:0;    }    #iconImg    {      position: absolute;      width: 120px;      right: 50px;      top:30px;    }    #iconImg img    {      margin-top: 8px;      border: 2px solid #FFA50000;      transition: all 0.5s;    }  </style>  <script src="js/Method.js"></script></head><body>  <p id="con">    <p id="bgImg">      <img src="img/a.jpeg">    </p>    <p id="iconImg">      <img src="img/icon_a.jpeg">      <img src="img/icon_b.jpeg">      <img src="img/icon_c.jpeg">      <img src="img/icon_d.jpeg">      <img src="img/icon_e.jpeg">    </p>  </p>  <script>    var bgImg,iconImg,prevImg,imgList;//定義大圖 小圖的盒子(5個(gè)img)    var N=0;//圖像標(biāo)記    var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];//圖片設(shè)置為數(shù)組形式 傳參    init();    function init() {      Method.loadImage(arr,loadFinishHandler)//預(yù)加載    }    function loadFinishHandler(list) {//預(yù)加載賦值      imgList=list;      bgImg=document.getElementById("bgImg");      iconImg=document.getElementById("iconImg");      for(var i=0;i<iconImg.children.length;i++){        iconImg.children[i].num=i;        iconImg.children[i].addEventListener("click",clickHandler);      }      changeBorder(iconImg.firstElementChild);    }    setInterval(autoImg,3000);    function autoImg() {//自動(dòng)輪播效果      N++;  //全局變量 用于控制當(dāng)前輪播順序      if (N>4) N=0;      changeImg(N);//大圖輪播      changeBorder(iconImg.children[N]);//小圖外邊框輪播 設(shè)置第幾個(gè) 弄懂參數(shù)代表含義    }    function clickHandler(e) {      e =e || window.event;      changeBorder(this);      N=this.num;      changeImg(this.num);    }    function changeBorder(elem) {      if(prevImg){        prevImg.style.border="2px solid #FFA50000";      }      prevImg=elem;      prevImg.style.border="2px solid #FFA500";    }    function changeImg(index) {      if(bgImg.children.length>1){        bgImg.lastElementChild.remove();      }      bgImg.lastElementChild.style.opacity="0";      imgList[index].style.opacity="1";      bgImg.insertBefore(imgList[index],bgImg.firstElementChild);    }  </script></body></html>

關(guān)于JavaScript中怎么實(shí)現(xiàn)縱向輪播圖問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手