自己做的js幻灯片类库，欢迎使用，欢迎拍砖。
用了两个晚上，封装了一个js幻灯片的函数(类库？框架？)，随你怎么叫。因为自己做网站用到，以前都是用flash壳，麻烦，后来用jquery插件，太大。所以自己动手做了一个，压缩后只有3k。窃以为比较使用，跟大家分享，欢迎各路大牛批评指正。
测试页面在：http://gf-zj.com/slider/
打包下载地址：http://gf-zj.com/slider/slider.zip
/** * i use closure to simulate private method in OOP,because i don't wanna disturb the others js libraris you may use like jQuery,which uses $ * remember the only variable i inject to window is Slider * * (c)logan liu * Email:hellouniverse@qq.com * if you find bugs,Don't hesitate contacting me. */(function(window){ function Slider(contentID, handlerID, pageNum, onePageWidth, direction, step, speed){ if ((!contentID) || (!handlerID) || (!pageNum) || (!onePageWidth)) { alert("init error,see your paraments"); } this.contentID = contentID; this.handlerID = handlerID; this.pageNum = pageNum; this.onePageWidth = onePageWidth; this.step = step || 10; this.direction = direction; this.speed = speed || 1; } var $ = function(id){ return document.getElementById(id); } var style = function(sid, key, value){ if (value) $(sid).style[key] = value; else return $(sid).style[key]; }; /** * * @param {Object} id * @param {Object} i *0-100 */ var fade = function(id, i){ style(id, "filter", "alpha(opacity=" + i + ")"); i = i / 100; style(id, "-moz-opacity", i); style(id, "-khtml-opacity", i); style(id, "opacity", i); }; var log = function(){ if (!window.console) return; // console.log(arguments.callee.caller.toString()); for (var i in arguments) { console.log(i + ":" + arguments[i]); } } var addEvent = function(elm, evType, fn, useCapture){ if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); } else if (elm.attachEvent) { elm.attachEvent('on' + evType, fn); } else { elm['on' + evType] = fn; } }; var dump = function(o){ for (var i in o) { log(i + ":" + o[i]); } }; Slider.prototype = { changeEvent: "onclick", leftAndRightArrow: false, pageHandler: true, currentPage: 0, transformEffect: "", intervalId: 0, duration: 6000, /** * anything can case to false stands for horizontal.and the others are vertical. */ direction: 0, /** * rend page navigator like 1,2...,so you can override it with you method such as page1,page2..or just empty. * @param {Object} i */ rendPageNav: function(i){ return i == -1 || i == this.pageNum ? "" : (i + 1); }, /** * set navigator's class when clicked.add "current" to this.currentPage * @param {Object} i */ rendNav: function(j){ var c = $(this.handlerID).children; j = this.leftAndRightArrow ? (j + 1) : j; for (var i = (this.leftAndRightArrow ? 1 : 0), l = (this.leftAndRightArrow ? c.length - 1 : c.length); i < l; i++) { c[i].className = (i == j ? "current" : ""); } }, initHandler: function(){ var tempThis = this; for (var i = (this.leftAndRightArrow ? -1 : 0), len = (this.leftAndRightArrow ? this.pageNum + 1 : this.pageNum); i < len; i++) { if ((!tempThis.pageHandler) && i != -1 && i != tempThis.pageNum) continue; var a = document.createElement("a"); a.href = "#nogo"; a.className = (i == -1 ? "left" : (i == 0 ? "current" : (i == this.pageNum ? "right" : ""))); /** * must use closure here to keep i. * inspired by:Listing 2-16,page 29,<Pro JavaScript Techniques>,John Resig */ (function(){ var tempI = i; a[tempThis.changeEvent] = function(){ this.blur(); tempThis.toPage(tempI == -1 ? "-1" : (tempI == tempThis.pageNum ? "+1" : tempI)); }; })(); a.innerHTML = tempThis.rendPageNav(i); $(this.handlerID).appendChild(a); } }, toPage: function(toNum){ if (toNum === "+1") toNum = this.currentPage + 1; if (toNum === "-1") toNum = this.currentPage - 1; if (this.currentPage == toNum) return; if (toNum >= this.pageNum) toNum = toNum % this.pageNum; if (toNum < 0) toNum = this.pageNum - 1; this.rendNav(toNum); var toPos = -toNum * this.onePageWidth; var currentPos = -this.currentPage * this.onePageWidth; this.stopAutoSwitch(); var value = this.direction ? "top" : "left"; this.transformFn(this.contentID, value, currentPos, toPos, this.startAutoSwitch); //fix some pix if (style(this.contentID, value) != toPos) style(this.contentID, value, toPos + "px"); this.currentPage = toNum; }, /** * all the transform funcitons must set value(left,top) from x to y. * i don't care how you transfrom but the start stat and the end stat. * @param {Object} id * @param {Object} value * @param {Object} from * @param {Object} to */ transformFn: function(id, value, from, to, callback){ // log(this.transformEffect,id, value, from, to); switch (this.transformEffect) { case "fade": var tempThis = this; //fade from 1 to 0 to 1,i change from 1 to 0 to -1 (function fadeEffect(i){ i = i - 5; if (i == -100) { fade(id, 100); callback.call(tempThis); } else { if (i == 0) { style(id, value, to + "px"); } fade(id, i >= 0 ? i : -i); window.setTimeout(function(){ fadeEffect(i); }, tempThis.speed); } })(100); break; case "slide": var neg = (to - from > 0) ? "1" : "-1"; var tempThis = this; (function slideEffect(toTemp){ style(tempThis.contentID, value, toTemp + "px"); if ((to - toTemp) * neg > 0) { window.setTimeout(function(){ slideEffect(toTemp + neg * tempThis.step); }, tempThis.speed); } else { callback.call(tempThis); } })(from + neg * tempThis.step); break; default: style(id, value, to + "px"); callback(); break; } }, winonload: function(duration){ style(this.contentID, "position", "absolute"); this.initHandler(); this.startAutoSwitch(); return {};//it's necessary for IE6 }, startAutoSwitch: function(){ if (this.duration > 0) { var tempThis = this; this.intervalId = window.setInterval(function(){ tempThis.toPage(tempThis.currentPage + 1) }, tempThis.duration); } }, stopAutoSwitch: function(){ if (this.intervalId) window.clearInterval(this.intervalId); }, start: function(duration, transformEffect){ this.duration = duration || 3000; this.transformEffect = transformEffect || "slide"; addEvent(window, 'load', this.winonload(), false); } }; window.Slider = Slider;})(window) 1 楼 alosin 2011-04-18 主流浏览器都支持么！ 2 楼 beiizl 2011-04-25 看了示例，图片闪来闪去的。。 3 楼 pywepe 2011-04-25 测试页面打不开 4 楼 xieyongwei 2011-04-25 可否提供这个功能：就是可以设置每一副图片的文字说明，并可以指定相对显示位置和超链。 5 楼 mylove4 2011-04-25 pywepe 写道测试页面打不开godaddy的服务器，在新加坡。速度不是一般的慢。。。请见谅。刷新一下试试 6 楼 mylove4 2011-04-25 beiizl 写道看了示例，图片闪来闪去的。。
多谢提醒。请问您是在什么浏览器下？操作系统呢？ 7 楼 mylove4 2011-04-25 xieyongwei 写道可否提供这个功能：就是可以设置每一副图片的文字说明，并可以指定相对显示位置和超链。
这些都是可配置的。
比如这个站http://21shsb.net/ 所有的切换效果都是用的slider。
还有内页的banner视频图片混排：http://21shsb.net/products/sandmakers/1.html