最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS如何实现横向轮播图 JS实现横向轮播图代码
时间:2020-01-18 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下JS实现横向轮播图代码,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
描述:
轮播图,中级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),解决了初级版本的点1再点5时多张图片滑动的问题,核心只有两张图在切换,加入了图片加载。
效果:
代码:
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
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28