微客导航 » 文章资讯 » JS实现横向轮播图（初级版）

JS实现横向轮播图（初级版）

2023-08-02 21:41:04 330

本文实例为大家分享了JS实现横向轮播图的具体代码，供大家参考，具体内容如下

描述：

轮播图，初级，横向buton或者底部数字控制轮播，可以实现自动轮播（注释了，使用的话将其注释消掉），核心知识是数据驱动图像的位移达到效果。

效果：

代码：

js文件：

/*
*工厂模式
**/

varMethod=(function(){
return{
loadImage:function(arr,callback){
varimg=newImage();
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){
varelem=document.createElement(type);
if(parent)parent.appendChild(elem);
for(varkeyinstyle){
elem.style[key]=style[key];
}
returnelem;
}
}
})();

html文件：





Title

精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS实现横向轮播图（初级版）

热门推荐

随机推荐