（原）原生js封装的焦点图（幻灯片）效果一
http://www.cnblogs.com/hongru/archive/2010/09/23/1833441.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{margin:0;padding:0} body{font:12px/1.5 arial} ul{list-style:none} #slider{position:relative;width:470px;height:150px;overflow:hidden} #content li{float:left;width:470px;height:150px} #nav{position:absolute;right:5px;bottom:5px} #nav li{display:inline;float:left;width:15px;height:15px;margin-left:4px;background:#fff;color:#d94b01;text-align:center;line-height:15px} #nav .nav{background:#ffb442} </style> </head> <body> <div id="slider"> <ul id="content"> <li><img src="1.jpg" width="470" height="150" alt="" /></li> <li><img src="1.jpg" width="470" height="150" alt="" /></li> <li><img src="1.jpg" width="470" height="150" alt="" /></li> <li><img src="1.jpg" width="470" height="150" alt="" /></li> </ul> <ul id="nav"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script> var Hongru = {}; var H$ = function(id) { return document.getElementById(id); }; var H$$ = function(c, p) {// c child p parent return p.getElementsByTagName(c); }; Hongru.slider = function() { return { init: function(id, options) { var ul = this.u = H$$('ul', H$(id))[0]; var li = H$$('li', ul); this.l = li.length; this.index = 0; if (options.navId && options.curClass) { this.nav = H$$('li', H$(options.navId)); this.c = options.curClass; } this.a = options.auto || 0; this.v = options.vertical || 0; H$(id).style.overflow = 'hidden'; H$(id).style.position = 'relative'; ul.style.position = 'absolute'; if (this.v) { ul.style.top = 0;// 一开始没值必须要赋值 this.h = options.height || li[0].offsetHeight; ul.style.height = (this.l * this.h) + 'px'; } else { ul.style.left = 0; this.w = options.width || li[0].offsetWidth; ul.style.width = (this.l * this.w) + 'px'; } this.pos(options.index || 0, this.a ? 1 : 0);// 切换到options.index for (var i = 0; i < this.l; i++) { (function(_i) { H$$('li', H$('nav'))[_i].onmouseover = function() { setTimeout(function() { Hongru.slider.pos(_i);// 切换到_i }, 300); }; } (i)); } }, pos: function(pos, a) { clearInterval(this.u.posAnim); clearInterval(this.u.auto); var curPos = this.v ? parseInt(this.u.style.top) : parseInt(this.u.style.left);// 当前位置 var correctPos = this.v ? pos * this.h : pos * this.w;// 目标位置 var direction = correctPos > Math.abs(curPos) ? 1 : -1;// 切换方向 correctPos *= -1;// 0 -1 -2必然是负值 this.index = pos; if (this.nav) { for (var i = 0; i < this.l; i++) { this.nav[i].className = i == pos ? this.c : ''; } } this.u.posAnim = setInterval(function() { Hongru.slider.anim(correctPos, direction, a); }, 10); }, anim: function(des, dir, a) { var curPos = this.v ? parseInt(this.u.style.top) : parseInt(this.u.style.left); if (curPos == des) { clearInterval(this.u.posAnim); if (a || this.a) { Hongru.slider.auto(); } } else { var v = curPos - Math.ceil(Math.abs(des - curPos) * .07) * dir + 'px'; this.v ? this.u.style.top = v : this.u.style.left = v; } }, auto: function() { this.u.auto = setInterval(function() { Hongru.slider.move(1, 1);// 方向指的是，0到1往右即1，4到0往左即-1 }, this.a * 1000); }, move: function(n, a) {// n是方向 a是自动 var num = this.index + n; var i = (n == 1 ? ((num == this.l) ? 0 : num) : ((num < 0) ? (this.l - 1) : num)); // 以上确定切换到第几个 Hongru.slider.pos(i, a); } // 悬浮、自动2样 // 悬浮就是，nav每个li绑定悬浮事件，指定切换到第几个图片，用pos去做切换，再配合anim最终实现带动画效果的切换 // 自动就是，初始化后，启动自动auto，再配合move来指定切换到第几个，再用pos去做切换，再用anim最终实现带动画效果的切换 }; }(); Hongru.slider.init('slider', { auto: 3, vertical: 1, navId: 'nav', curClass: 'nav', index: 0 }); </script> </body> </html>
