一个非常简单的JS幻灯、图片切换轮播代码

发布时间：2018-08-20 16:20:59 所属栏目：Asp教程来源：站长网

导读：一个非常简单的JS幻灯、图片切换轮播代码。也就是大家经常见到的JS图片切换特效，我做的第一个JS组件，纯 Java Script实现的，没有借用 jQuery ，是去年底写的. 现在看看, 代码结构混乱, 所谓颗粒化基本没有，纯为练习之作, 然望大家多多指点。演示： !Do

　　一个非常简单的JS幻灯、图片切换轮播代码。也就是大家经常见到的JS图片切换特效，我做的第一个JS组件，纯JavaScript实现的，没有借用jQuery，是去年底写的. 现在看看, 代码结构混乱, 所谓颗粒化基本没有，纯为练习之作, 然望大家多多指点。

　　演示：

<!Doctype HTML> <html> <head> <title>slider</title> <script type="text/javascript"> function e(p,ele) {return p.getElementsByTagName(ele)}; function el(id) {return document.getElementById(id)}; function t(o,e,f) {o.addEventListener?o.addEventListener(e,f,false):o.attachEvent('on'+e,f)}; var ss = {}; ss.slider = function() { var arg, move = function() {}; move.prototype.init = function(opt) { arg = this.set(opt); var wrap = el(opt.gallery), ctl = el(opt.control), obj = this.obj = e(wrap,'ul')[0], $this = this; this.u = e(obj,'li'); this.cu = e(ctl,'li'); this.uW = this.u[0].offsetWidth; this.uH = this.u[0].offsetHeight; this.len = this.u.length; this.old = this.cur = arg.index; wrap.style.cssText = 'width:' + this.uW + 'px;' + 'height:' + this.uH + 'px;' + 'overflow: hidden;'; obj.style.cssText = 'height:' + this.uH + 'px;' + 'width:' + (arg.dir ? this.uW + 'px;' : this.len * this.uW + 'px;') + (arg.dir ? 'top:' + -1 * this.cur * this.uH + 'px;' : 'left:' + -1 * this.cur * this.uW + 'px;'); this.cu[this.cur].className = 'current'; this.event(arg.type); setTimeout(function() {$this.auto()},arg.interval); }; move.prototype.set = function(opt) { org = { gallery: 'gal-wrap', control: "gal-panel", dir: false, index: 0, speed: 16, interval: 3000, type: 'click' }; for(var p in opt) { org[p] = opt[p] } return org; }; move.prototype.timeMgr = function() { var $this = this; this.m = setTimeout(function() {$this.auto(); $this.indexMgr()},arg.interval); }; move.prototype.auto = function() { var $this = this; if(this.a != undefined) clearInterval(this.a); this.a = setInterval(function() {$this.pos()},arg.speed); }; // Downloads By http://www.veryhuo.com/down move.prototype.pos = function() { var dir = arg.dir ? parseInt(this.obj.style.top) : parseInt(this.obj.style.left), area = arg.dir ? this.uH : this.uW, dis = (area * this.cur + dir) * .1, step = dis >= 0 ? Math.ceil(dis) : Math.floor(dis); arg.dir ? this.obj.style.top = dir - step + 'px' : this.obj.style.left = dir - step + 'px'; this.stop(dir,area); }; move.prototype.stop = function(dir,area) { if(Math.abs(dir) == area * this.cur) { clearInterval(this.a); this.cur == this.len - 1 ? this.cur = 0 : this.cur++; this.timeMgr(); } }; move.prototype.indexMgr = function() { this.cu[this.cur].className = 'current'; if(this.old != this.cur) { this.cu[this.old].className = ''; this.old = this.cur; } }; move.prototype.event = function(e) { for(var i = 0; i < this.cu.length; i++) { var $this = this; t(this.cu[i],e,num(i,$this)); } function num(n,$this) { return function() { clearInterval($this.a); clearTimeout($this.m); $this.cu[n].className = 'current'; if($this.old != n) { $this.cu[$this.old].className = ''; $this.old = $this.cur = n; } $this.c = 0; $this.auto(); } } }; return move; }(); </script> <style type="text/css"> * {margin: 0; padding: 0;} body {padding: 0 0 50px 50px;} #gal-wrap { position: relative; } #gallery { position: absolute; } #gallery li { list-style: none; float: left; width: 450px; height: 350px; } #gallery p { text-align: center; color: #cdcdcd; } #gal-panel { height: 100%; overflow: hidden; } #gal-panel li { float: left; margin-right: 6px; list-style: none; cursor: pointer; } #gal-panel li.current { font-weight: bold; color: red; } </style> </head> <body> <div id="gal-wrap"> <ul id="gallery"> <li><p><img src="/uploads/common/images/p7.jpg" /></p></li> <li><p><img src="/uploads/common/images/p5.jpg" /></p></li> <li><p><img src="/uploads/common/images/p3.jpg" /></p></li> <li><p><img src="/uploads/common/images/p4.jpg" /></p></li> </ul> </div> <div id="gal-panel"> <ul id="gallery-panel"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript"> var tt = new ss.slider(); tt.init({ gallery: 'gal-wrap', control: "gal-panel", dir: false, index: 0, speed: 20, interval: 1000, type: 'mouseover' }); </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：91站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!