用JavaScript 代码来做，图片切换效果！

用原生的JS写动画效果的确是个很令人纠结的事情，倒不如直接用jQuery来写，亦或找一些jQuery插件。能力达不到的时候，为了工作进度，只能采取心有不甘的手段。

如果真的获得能力的提高，我认为还是必须去学习那些优秀的程序员写的优秀的代码。图片切换并不是很难，只不过要获得一些动画效果有些费力，由于本人数学不好，加之不努力，所以做起动画来很吃力。

动画切换要结合JS和CSS达到想要的效果。图片切换一般涉及的CSS的定位，以及JS定时器的知识。定位方式一般定时变换幻灯片的left或者 top属性，实现图片移动。还有一种是设置幻灯片的父容器的scrollTop或者scrollLeft属性。这里用的是定位方式。

首先HTML结构遵循一定的规律，至于为什么，下面会提到。

1 2 3 4 5 6 7

外部包裹的div是一个容器，用来包裹图片容器和切换容器。外部的大div和图片容器宽度和高度定死，overflow属性设置为hidden，防止图片溢出容器。·

下面介绍JS代码如何实现幻灯效果。

首先创建Slider对象，在JS中函数就是对象。该对象接受两个属性，一个是外层容器的ID属性值，另一个是配置参数。

var Slider = function(elem, options) { var container = document.getElementById(elem), // HTML结构遵循规律 divs = container.getElementsByTagName('div'), // 至于为何 imgWrapper = divs[0], // 此处就是原因 sheets = imgWrapper.getElementsByTagName('img'), triggersObj = divs[1], triggers = triggersObj.getElementsByTagName('a'); var that = this; this.imgsCon = imgWrapper.getElementsByTagName('ul')[0]; this._imgs = imgWrapper.getElementsByTagName('img') // 设置默认配置参数 this.options = { auto: true, // 默认自动翻滚 index: 0, // 第一张图片开始 vertical: false, // 水平滚动 event: 'onclick' //点击切换 } // 设置参数 this.setOptions(options); this.event = this.options.event; this.currentIndex = this.options.index; // 幻灯宽和高 this.sheetWidth = this.sheetHeight = 0; this.sheetWidth = sheets[0].offsetWidth; this.sheetHeight = sheets[0].offsetHeight; // 移动方向 this.direction = !!this.options.vertical ? 'top' : 'left'; this.imgsCon.style.position = 'absolute'; // 循环滚动 if (!!this.options.auto) { this.autoStart(); } if ('top' === this.direction) { this.imgsCon.style[this.direction] = - (this.currentIndex * this.sheetHeight || 0) + 'px'; } else if ('left' === this.direction) { this.imgsCon.style.width = this.sheetWidth * sheets.length + 'px'; this.imgsCon.style[this.direction] = - (this.currentIndex * this.sheetWidth || 0) + 'px'; } var lis = this.imgsCon.getElementsByTagName('li'); for (var i = lis.length; i--;) { var li = lis[i], cssText = ''; if ('left' === this.direction) { cssText = cssText + 'float:left;'; } cssText += 'width:' + this.sheetWidth + 'px;'; cssText += 'height:' + this.sheetHeight + 'px;'; li.style.cssText = cssText; } triggers[this.currentIndex].className += ' current'; // 绑定事件 for (var i = triggers.length; i--;) { triggers[i][this.event] = function(index, that) { return function() { clearInterval(that.timer); setTimeout(function() { that.autoStart(); }, 3000); that.endPos = { left: - index * that.sheetWidth, top: - index * that.sheetHeight }; that.move(); that.currentIndex = index; that.setCurrentIndex(); return false; } }(i, this); }}

getStep方法接收两个参数，一个是目标值，另一个是当前值。例如，目标值是left=-400，当前值为0，那么在从0到-400这段运动的距离中，如果没有达到目标值，通过不断地调用getStep方法，获得不同的渐进量。

至于其他有什么忽略之处，欢迎指正。