本文实例为大家分享了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);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。