jquery实现图片的滑动和自动定时滑动

前一段时间用css3实现了图片的滑动。使用了css3的transform属性。

但是IE浏览器不支持这个属性，最近需要做的图片滑动要兼容浏览器，所以为了兼容浏览器，使用了jquery来实现。

具体代码：

js：

var Class = 
{
    create: function() {
        return function() {
            //返回一个function对象
            this.initialize.apply(this, arguments);
        }
    }
}
var Scroll = Class.create();
Scroll.prototype = 
{
    initialize: function(options) {  //初始化
        this.setOptions(options);
        this.doScroll();
    },
    setOptions: function(options) {  //初始化变量
        this.current = 1;
        this.speed = options.speed;  //图片滑动速度
        this.timer = options.timer;  //定时器事件
        this.auto = options.auto;　　 //是否自动滑动
        this.clickStopauto = options.clickStopauto; //点击是否结束自动滑动
        this.slides = options.slides;  
        this.point = options.point;
        this.totWidth = 0;
        this.positions = new Array();  
        _this = this;             //因为下面用到了each函数。所以this的指向会发生变化。在外定义一个_this来存储this指向Scroll.prototype
        $('#slides .slide').each(function(i) {   //这里我本来想用的是_this.slides但是如果那样的话在函数里的$(this)的指向会出现问题。希望能够获得指点。感觉这样写质量不高。
            _this.positions[i] = _this.totWidth;    
            _this.totWidth += $(this).width();
        })
        $("#slides").css("width", this.totWidth);   //设置最外层slide的宽度
        if(this.auto) 
            this.createInterval();
    },
    doScroll: function() {
        $('#menu ul li a').click(function(e, keepScroll) {
            var self = _this;
            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');
            var pos = $(this).parent().prevAll('.menuItem').length;        
            $('#slides').stop().animate({marginLeft:-_this.positions[pos]+'px'}, _this.speed);            
            if(_this.clickStopauto) {
                if(!keepScroll) 
                    clearInterval(_this.itvl);
            } else {
                if(!keepScroll)
                    _this.current = $('#menu ul li a').index(this) + 1;
            }
        })
    },
    autoAdvance: function() {        //自动播放
        if(this.current == -1) 
            return false;    
        $('#menu ul li a').eq(this.current%$('#menu ul li a').length).trigger('click', true);
        this.current++;        
    },
    createInterval: function() {    //定时器
        var changeEvery = this.timer;
        _this.itvl = setInterval( function() {
            _this.autoAdvance();
        }, _this.timer*1000);
    }
}

具体使用方法

var Scroll = new Scroll({

speed: 450,
timer: 1,
slides: slides,
point: point,
auto: true,
clickStopauto: false

})

具体demo下载地址：http://www.cnblogs.com/zzcflying/admin/Files.aspx