本文實例為大家分享了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文件：

Title

#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;

}

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[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);

}

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

總結

以上是生活随笔為你收集整理的图片竖轮播html,JS实现纵向轮播图（初级版）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。