JS實現縱向輪播圖(初級版)
阿新 • • 發佈:2020-01-19
本文例項為大家分享了JS實現縱向輪播圖的具體程式碼,供大家參考,具體內容如下
描述:
縱向buton或者底部數字控制輪播,可以實現自動輪播(註釋了,使用的話將其註釋消掉),核心知識是資料驅動影象的透明度達到效果。
效果:
程式碼:
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物件下的事件偵聽沒有被刪除掉,將會常駐堆中 // 一旦觸發了這個事件需要的條件,就會繼續執行事件函式 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> <div id="con"> <div id="bgImg"> <img src="img/a.jpeg"> </div> <div 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"> </div> </div> <script> var bgImg,iconImg,prevImg,imgList;//定義大圖 小圖的盒子(5個img) var N=0;//影象標記 var arr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];//圖片設定為陣列形式 傳參 init(); function init() { Method.loadImage(arr,loadFinishHandler)//預載入 } function loadFinishHandler(list) {//預載入賦值 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() {//自動輪播效果 N++; //全域性變數 用於控制當前輪播順序 if (N>4) N=0; changeImg(N);//大圖輪播 changeBorder(iconImg.children[N]);//小圖外邊框輪播 設定第幾個 弄懂引數代表含義 } 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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。