作者:老鼠扛着刀找猫_592 | 来源:互联网 | 2020-09-05 14:44
本文为大家介绍了js如何实现横向轮播图的方法,具有一定的参考价值,希望可以帮助到大家。轮播图、横向buton或者底部数字控制轮播,可以实现自动轮播,核心知识是数据驱动图像的位移达到效果。
/*
* 工厂模式
* */
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;
}
}
})();
(推荐学习:js教程)
html代码:
更多编程相关内容,请关注 第一PHP社区 编程入门栏目!
以上就是js如何实现横向轮播图的详细内容,更多请关注 第一PHP社区 其它相关文章!