JavaScript 图片切换

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

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

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

<div id="J_ad_gallery">
  <div>
    <ul>
      <li><img src="image/banner-1.png" width="514" height="191" /></li>
      <li><img src="image/banner-2.png" width="514" height="191" /></li>          
      <li><img src="image/banner-3.png" width="514" height="191" /></li>
      <li><img src="image/banner-4.png" width="514" height="191" /></li>
      <li><img src="image/banner-5.png" width="514" height="191" /></li>
      <li><img src="image/banner-6.png" width="514" height="191" /></li>
      <li><img src="image/banner-7.png" width="514" height="191" /></li>            
    </ul>
  </div>
  <div>
    <a href="javascript:void(0)">1</a>
    <a href="javascript:void(0)">2</a>
    <a href="javascript:void(0)">3</a>
    <a href="javascript:void(0)">4</a>
    <a href="javascript:void(0)">5</a>
    <a href="javascript:void(0)">6</a>
    <a href="javascript:void(0)">7</a>        
  </div>      
</div>

外部包裹的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); 
    }
}

以上获得图片及切换容器对象，以及设置默认配置参数。当页面水平滚动的时候，需要注意的是，必须计算出所有图片的宽度和，并将这个值赋给图片容器， 并将所有的图片外的li元素的float属性设置为left，否则，图片不会在同一行，并且会折行，从而失去水平滚动想要的效果。

事件绑定的时候，个人感觉比较重要的是move方法。在这个方法中会调用到getStep方法，从而获得一个渐进量，这对实现动画效果是十分重要的。

move: function() {
    var finished = true;
    var posNow = {
        left: parseInt(this.imgsCon.style.left),
        top: parseInt(this.imgsCon.style.top)
    }
    var step = this.getStep(this.endPos[this.direction] , posNow[this.direction]);

    if (step != 0) {
        finished = false; 
        this.imgsCon.style[this.direction] = 
             (posNow[this.direction] + step) + "px";   
    }
    if (!finished) {
        var that = this;
        setTimeout(function() { that.move.call(that); },  20);        
    }
},

getStep : function(target, now) {
    var step = (target - now) / 10;
    if (step == 0) return 0;
    if (Math.abs(step) < 1) return (step > 0 ? 1 : -1);
    return step;
}

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

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

点击这里查看效果图