很好用的QQ图片滑动效果[转]

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">

                          

http://hiphotos.baidu.com/ysuhy/abpic/item/5703b07bc7aaeeae2e73b31b.jpg" width="610px" height="205px" alt="" />

            

http://hiphotos.baidu.com/ysuhy/abpic/item/b3cb7102ac9104af08fa931b.jpg" width="610px" height="205px" alt="" />

            

http://hiphotos.baidu.com/ysuhy/abpic/item/0422300151ed9ec4e950cd1b.jpg" width="610px" height="205px" alt="" />

            

http://hiphotos.baidu.com/ysuhy/abpic/item/602eb5fb3d95025da8d3111b.jpg" width="610px" height="205px" alt="" />

            

http://hiphotos.baidu.com/ysuhy/abpic/item/602eb5fb3d95025da8d3111b.jpg" width="610px" height="205px" alt="" />

             

<script>
    var QQ = function() {
        // 公用函数
        function T$(id) { return document.getElementById(id); }
        function T$$(root, tag) { return (root || document).getElementsByTagName(tag); }
        function $extend(des, src) { for (var p in src) { des[p] = src[p]; } return des; }
        function $each(arr, callback, thisp) {
            if (arr.forEach) { arr.forEach(callback, thisp); }
            else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], i, arr); }
        }
        function currentStyle(elem, style) {
            return elem.currentStyle || document.defaultView.getComputedStyle(elem, null);
        }
        // 缓动类
        var Tween = {
            Quart: {
                easeOut: function(t, b, c, d) {
                    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
                }
            },
            Back: {
                easeOut: function(t, b, c, d, s) {
                    if (s == undefined) s = 1.70158;
                    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
                }
            },
            Bounce: {
                easeOut: function(t, b, c, d) {
                    if ((t /= d) < (1 / 2.75)) {
                        return c * (7.5625 * t * t) + b;
                    } else if (t < (2 / 2.75)) {
                        return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                    } else if (t < (2.5 / 2.75)) {
                        return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                    } else {
                        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                    }
                }
            }
        }
        // 主类构造函数
        var scrollTrans = function(cid, sid, count, config) {
            var self = this;
            if (!(self instanceof scrollTrans)) {
                return new scrollTrans(cid, sid, count, config);
            }
            self.container = T$(cid);
            self.scroller = T$(sid);
            if (!(self.container || self.scroller)) {
                return;
            }
            self.config = $extend(defaultConfig, config || {});
            self.index = 0;
            self.timer = null;
            self.count = count;
            self.step = self.scroller.offsetWidth / count;
        };
        // 默认配置
        var defaultConfig = {
            trigger: 1, // 触发方式1:click other: mouseover
            auto: true, // 是否自动切换
            tween: Tween.Quart.easeOut, // 默认缓动类
            Time: 10, // 滑动延时
            duration: 50, // 切换时间
            pause: 3000, // 停顿时间
            start: function() { }, // 切换开始执行函数
            end: function() { } // 切换结束执行函数
        };
        scrollTrans.prototype = {
            constructor: scrollTrans,
            transform: function(index) {
                var self = this;
                index == undefined && (index = self.index);
                index < 0 && (index = self.count - 1) || index >= self.count && (index = 0);
                self.time = 0;
                self.target = -Math.abs(self.step) * (self.index = index);
                self.begin = parseInt(currentStyle(self.scroller)['left']);
                self.change = self.target - self.begin;
                self.duration = self.config.duration;
                self.start();
                self.run();
            },
            run: function() {
                var self = this;
                clearTimeout(self.timer);
                if (self.change && self.time < self.duration) {
                    self.moveTo(Math.round(self.config.tween(self.time++, self.begin, self.change, self.duration)));
                    self.timer = setTimeout(function() { self.run() }, self.config.Time);
                } else {
                    self.moveTo(self.target);
                    self.config.auto && (self.timer = setTimeout(function() { self.next() }, self.config.pause));
                }
            },
            moveTo: function(i) {
                this.scroller.style.left = i + 'px';
            },
            next: function() {
                this.transform(++this.index);
            }
        };
        return {
            scroll: function(cid, sid, count, config) {
                window.onload = function() {
                    var frag = document.createDocumentFragment(), nums = [];
                    for (var i = 0; i < count; i++) {
                        var li = document.createElement('li');
                        (nums[i] = frag.appendChild(document.createElement('li'))).innerHTML = i + 1;
                    }
                    T$('page').appendChild(frag);
                    // 调用主类
                    var st = scrollTrans(cid, sid, count, config);
                    $each(nums, function(o, i) {
                        o[st.config.trigger == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); }
                        o.onmouseout = function() { o.className = ''; st.transform(); }
                    });
                    st.start = function() {
                        $each(nums, function(o, i) {
                            o.className = st.index == i ? 'on' : '';
                        });
                    };
                    st.transform();
                }
            }
        }
    } ();
QQ.scroll('container', 'scroller', 5, {trigger: 0});
</script>