本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下
<强>描述:
纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度达到效果。
<>强效果:
<强>代码:
js文件:
/*
*工厂模式
* */var方法=(函数(){
返回{
回调loadImage:函数(arr) {
var img=新形象();
img.arr=arr;
img.list=[];
img.num=0;
img.callback=回调;//如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中//一旦触发了这个事件需要的条件,就会继续执行事件函数
img.addEventListener(“负载”,this.loadHandler);
img.self=;
img.src=https://www.yisu.com/zixun/arr [img.num];
},
loadHandler:函数(e) {
this.list.push (this.cloneNode (false));
this.num + +;
如果(this.num> this.arr.length-1) {
this.removeEventListener(“负载”,this.self.loadHandler);
this.callback (this.list);
返回;
}
this.src=https://www.yisu.com/zixun/this.arr [this.num];
},
$ c:函数(类型、父母、风格){
var elem=document.createElement(类型);
如果(父)parent.appendChild (elem);
(var关键的风格){
elem.style(例子)=风格(例子);
}
返回elem;
}
}
})();
html文件:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
#案子,# bgImg # bgImg img
｛
宽度:100%;
身高:500 px;
}
#反对
｛
位置:相对;
保证金:汽车;
}
# bgImg {
位置:绝对的;
}
# bgImg img {
透明度:1;
过渡:1;
位置:绝对的;
左:0;
上图:0;
}
# iconImg
｛
位置:绝对的;
宽度:120 px;
右:50 px;
上图:30 px;
}
# iconImg img
｛
margin-top: 8 px;
边界:2 px固体# FFA50000;
过渡:所有0.5年代;
}
& lt;/style>
& lt;脚本src=" https://www.yisu.com/zixun/js/Method.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=捌北?
& lt; div id=癰gImg”比;
& lt; img src=" https://www.yisu.com/zixun/img/a.jpeg "比;
& lt;/div>
& lt; div id=癷conImg”比;
& lt; img src=" https://www.yisu.com/zixun/img/icon_a.jpeg "比;
& lt; img src=" https://www.yisu.com/zixun/img/icon_b.jpeg "比;
& lt; img src=" https://www.yisu.com/zixun/img/icon_c.jpeg "比;
& lt; img src=" https://www.yisu.com/zixun/img/icon_d.jpeg "比;
& lt; img src=" https://www.yisu.com/zixun/img/icon_e.jpeg "比;
& lt;/div>
& lt;/div>
& lt; 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 ();
init()函数{
loadFinishHandler Method.loadImage (arr)//预加载
}
函数loadFinishHandler(列表){//预加载赋值
imgList=列表;
bgImg=. getelementbyid (“bgImg”);
iconImg=. getelementbyid (“iconImg”);
我(var=0; i< iconImg.children.length;我+ +){
iconImg.children[我].num=我;
iconImg.children[我].addEventListener(“点击”,clickHandler);
}
changeBorder (iconImg.firstElementChild);
}
setInterval (autoImg, 3000);
函数autoImg(){//自动轮播效果
N + +;//全局变量用于控制当前轮播顺序
如果(N> 4) N=0;
changeImg (N);//大图轮播
changeBorder (iconImg.children [N]);//小图外边框轮播设置第几个弄懂参数代表含义
}
函数clickHandler (e) {
e=e | | window.event;
changeBorder(这个);
N=this.num;
changeImg (this.num);
}
函数changeBorder (elem) {
如果(prevImg) {
prevImg.style。边境=" 2 px固体# FFA50000”;
}
prevImg=elem;
prevImg.style。边境=" 2 px固体# FFA500”;
}
函数changeImg(指数){
如果(bgImg.children.length> 1) {
bgImg.lastElementChild.remove ();
}
bgImg.lastElementChild.style.opacity=" 0 ";
(指数)imgList .style.opacity=?”;
bgImg.insertBefore (imgList(指数),bgImg.firstElementChild);
}
& lt;/script>
& lt;/body>
& lt;/html>
