分享一個(gè)用原生JavaScript寫的帶緩動(dòng)效果的圖片幻燈

　　朋友讓幫忙找個(gè)原生JS寫的帶緩動(dòng)效果的圖片幻燈，類似Tmall首頁的效果，找了一圈后發(fā)現(xiàn)網(wǎng)上JS寫的圖片幻燈很多，相關(guān)的jQuery插件也很多，但用原生JS寫的帶緩動(dòng)效果的卻不多。沒辦法只好自己動(dòng)手，現(xiàn)在把代碼分享給大家，希望對(duì)大家有用。

　　代碼中的緩動(dòng)公式用了司徒正美博客中整理的代碼：http://www.rzrgm.cn/rubylouvre/archive/2009/09/17/1567607.html

　　緩動(dòng)公式的推導(dǎo)主要利用了物理中的加速度知識(shí)，推薦過程可以看看這篇文章：http://floatyears.info/javascript-animation-easing

　　HTML部分：

<div id="J-Slide">
    <ul class="JSlide-list">
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_01.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_02.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_03.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_04.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_05.jpg" alt=""/></li>
    </ul>
    <ul class="JSlide-num">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="JSlide-mask"></div>
</div>

　　這部分比較簡單，跟Tmall首頁效果一樣，幾張圖片，左下角是圖片索引，并有一個(gè)半透明的遮罩層。

　　CSS部分：

body,ul,li{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
#J-Slide{
    width:600px;
    height:400px;
    position:relative;
    margin:50px auto;
    overflow:hidden;
}
#J-Slide .JSlide-list{
    position:absolute;
    width:3000px;
    left:0;
    top:0;
}
#J-Slide .JSlide-list li{
    float:left;
}
#J-Slide .JSlide-list li img{
    width:600px;
    height:400px;
}
#J-Slide .JSlide-num{
    position:absolute;
    left:0;
    bottom:0;
    height:30px;
    padding:5px;
    width:100%;
    z-index:10;
}
#J-Slide .JSlide-num li{
    width:30px;
    height:30px;
    margin-left:10px;
    float:left;
    font-size:16px;
    color:white;
    background:#716584;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    border-radius:15px;
}
#J-Slide .JSlide-mask{
    position:absolute;
    left:0;
    background:black;
    bottom:0;
    width:100%;
    height:40px;
    opacity:0.3;
    filter:Alpha(opacity = 30);
    z-index:1;
}
#J-Slide .JSlide-num .current{
    background:#B91919;
}

　　CSS部分比較簡單，直接用absolute定位。

　　JavaScript庫部分：

(function(){
    /*
    *參數(shù)說明:
    *id 必須
    *picwidth 可選
    *speed 可選
    *
    *作者:artwl
    *出處:http://artwl.cnblogs.com
    */
    var JCP_Slide=function(id,picwidth,speed){
        if(!(this instanceof JCP_Slide))
            return new JCP_Slide(id,picwidth,speed);
        var obj=document.getElementById(id),
            childs=obj.getElementsByTagName("ul");
        this.author="artwl";
        this.jslideList=childs[0];
        this.jslideNums=childs[1].children;
        this.speed= speed || 5000;
        this.picwidth= picwidth || (obj.currentStyle ? parseFloat(obj.currentStyle.width) : parseFloat(document.defaultView.getComputedStyle(obj,null).width));
        this.currentIndex=0;
        this.distance=this.picwidth;
        this.currentLeftPos=0;
        this.runHandle=null;
        this.len=this.jslideNums.length;
    }

    JCP_Slide.prototype={
        bindMouse:function(){
            var self=this;
            for(var i=0;i<this.len;i++){
                this.jslideNums[i].onmouseover=(function(index){
                    return function(){
                        self.currentIndex=index;
                        clearInterval(self.runHandle);
                        var prev=-1;
                        for(var k=0;k<self.len;k++){
                            if(self.jslideNums[k].className === "current")
                                prev = k;
                            self.jslideNums[k].className = k === index ? "current" : "" ;
                        }
                        if(prev != index){
                            self.distance=(prev - index)*self.picwidth;
                            self.currentLeftPos = -prev * self.picwidth;
                            self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc})
                        }
                    }
                })(i);
                this.jslideNums[i].onmouseout=function(){
                    self.autoRun();
                }
            }
        },
        autoRun:function(){
            var self=this;
            this.runHandle=setInterval(function(){
                self.distance=-self.picwidth;
                for(var k=0;k<self.len;k++){
                    self.jslideNums[k].className = "" ;
                }
                self.currentIndex++;
                self.currentIndex%=5;
                self.jslideNums[self.currentIndex].className = "current";
                self.currentLeftPos = -(self.currentIndex-1) * self.picwidth;
                if(self.currentIndex == 0){
                    self.distance = (self.len-1)*self.picwidth;
                    self.currentLeftPos = -self.distance;
                }
                self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc});
            },self.speed);
        },
        easeOutCirc:function(pos){
            return Math.sqrt(1 - Math.pow((pos-1), 2))
        },
        transition:function(el){
            el.style.position = "absolute";
            var options = arguments[1] || {},
            begin =  options.begin,//開始位置
            change = options.change,//變化量
            duration = options.duration || 500,//緩動(dòng)效果持續(xù)時(shí)間
            field = options.field,//必須指定，基本上對(duì)top,left,width,height這個(gè)屬性進(jìn)行設(shè)置
            ftp = options.ftp || 50,
            onStart = options.onStart || function(){},
            onEnd = options.onEnd || function(){},
            ease = options.ease,//要使用的緩動(dòng)公式
            end = begin + change,//結(jié)束位置
            startTime = new Date().getTime();//開始執(zhí)行的時(shí)間
            onStart();
            (function(){
                setTimeout(function(){
                    var newTime = new Date().getTime(),//當(dāng)前幀開始的時(shí)間
                    timestamp = newTime - startTime,//逝去時(shí)間
                    delta = ease(timestamp / duration);
                    el.style[field] = Math.ceil(begin + delta * change) + "px";
                    if(duration <= timestamp){
                        el.style[field] = end + "px";
                        onEnd();
                    } else {
                        setTimeout(arguments.callee,1000/ftp);
                    }
                },1000/ftp);
            })();
        },
        play:function(){
            this.bindMouse();
            this.autoRun();
        }
    };

    window.JCP_Slide=JCP_Slide;
})();

　　這個(gè)JS庫是核心，入口有三個(gè)參數(shù)，第一個(gè)是最外層的div的id（必須），第二個(gè)參數(shù)是圖片寬度（可選），默認(rèn)為最外層DIV寬度，第三個(gè)參數(shù)為自動(dòng)切換的時(shí)間間隔（可選），默認(rèn)為5秒。

　　bindMouse是綁定鼠標(biāo)的懸浮和移出事件，autoRun是讓圖片正動(dòng)切換，play方法調(diào)用了這兩個(gè)方法。

　　easeOutCirc是一個(gè)先快后慢的緩動(dòng)公式，transition是緩動(dòng)函數(shù)，這兩個(gè)方法的用法請(qǐng)參考司徒正美的博客：http://www.rzrgm.cn/rubylouvre/archive/2009/09/17/1567607.html

　　調(diào)用示例：

window.onload=function(){
    JCP_Slide("J-Slide").play();
};

　　完整代碼為：

View Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> New Document </title>
    <style type="text/css">
        body,ul,li{
            margin:0;
            padding:0;
        }
        ul{
            list-style:none;
        }
        #J-Slide{
            width:600px;
            height:400px;
            position:relative;
            margin:50px auto;
            overflow:hidden;
        }
        #J-Slide .JSlide-list{
            position:absolute;
            width:3000px;
            left:0;
            top:0;
        }
        #J-Slide .JSlide-list li{
            float:left;
        }
        #J-Slide .JSlide-list li img{
            width:600px;
            height:400px;
        }
        #J-Slide .JSlide-num{
            position:absolute;
            left:0;
            bottom:0;
            height:30px;
            padding:5px;
            width:100%;
            z-index:10;
        }
        #J-Slide .JSlide-num li{
            width:30px;
            height:30px;
            margin-left:10px;
            float:left;
            font-size:16px;
            color:white;
            background:#716584;
            line-height:30px;
            text-align:center;
            cursor:pointer;
            border-radius:15px;
        }
        #J-Slide .JSlide-mask{
            position:absolute;
            left:0;
            background:black;
            bottom:0;
            width:100%;
            height:40px;
            opacity:0.3;
            filter:Alpha(opacity = 30);
            z-index:1;
        }
        #J-Slide .JSlide-num .current{
            background:#B91919;
        }
    </style>
    <script>
        (function(){
            /*
            *參數(shù)說明:
            *id 必須
            *picwidth 可選
            *speed 可選
            *
            *作者:artwl
            *出處:http://artwl.cnblogs.com
            */
            var JCP_Slide=function(id,picwidth,speed){
                if(!(this instanceof JCP_Slide))
                    return new JCP_Slide(id,picwidth,speed);
                var obj=document.getElementById(id),
                    childs=obj.getElementsByTagName("ul");
                this.author="artwl";
                this.jslideList=childs[0];
                this.jslideNums=childs[1].children;
                this.speed= speed || 5000;
                this.picwidth= picwidth || (obj.currentStyle ? parseFloat(obj.currentStyle.width) : parseFloat(document.defaultView.getComputedStyle(obj,null).width));
                this.currentIndex=0;
                this.distance=this.picwidth;
                this.currentLeftPos=0;
                this.runHandle=null;
                this.len=this.jslideNums.length;
            }

            JCP_Slide.prototype={
                bindMouse:function(){
                    var self=this;
                    for(var i=0;i<this.len;i++){
                        this.jslideNums[i].onmouseover=(function(index){
                            return function(){
                                self.currentIndex=index;
                                clearInterval(self.runHandle);
                                var prev=-1;
                                for(var k=0;k<self.len;k++){
                                    if(self.jslideNums[k].className === "current")
                                        prev = k;
                                    self.jslideNums[k].className = k === index ? "current" : "" ;
                                }
                                if(prev != index){
                                    self.distance=(prev - index)*self.picwidth;
                                    self.currentLeftPos = -prev * self.picwidth;
                                    self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc})
                                }
                            }
                        })(i);
                        this.jslideNums[i].onmouseout=function(){
                            self.autoRun();
                        }
                    }
                },
                autoRun:function(){
                    var self=this;
                    this.runHandle=setInterval(function(){
                        self.distance=-self.picwidth;
                        for(var k=0;k<self.len;k++){
                            self.jslideNums[k].className = "" ;
                        }
                        self.currentIndex++;
                        self.currentIndex%=5;
                        self.jslideNums[self.currentIndex].className = "current";
                        self.currentLeftPos = -(self.currentIndex-1) * self.picwidth;
                        if(self.currentIndex == 0){
                            self.distance = (self.len-1)*self.picwidth;
                            self.currentLeftPos = -self.distance;
                        }
                        self.transition(self.jslideList,{field:'left',begin:self.currentLeftPos,change:self.distance,ease:self.easeOutCirc});
                    },self.speed);
                },
                easeOutCirc:function(pos){
                    return Math.sqrt(1 - Math.pow((pos-1), 2))
                },
                transition:function(el){
                    el.style.position = "absolute";
                    var options = arguments[1] || {},
                    begin =  options.begin,
                    change = options.change,
                    duration = options.duration || 500,
                    field = options.field,
                    ftp = options.ftp || 50,
                    onStart = options.onStart || function(){},
                    onEnd = options.onEnd || function(){},
                    ease = options.ease,
                    end = begin + change,
                    startTime = new Date().getTime();
                    onStart();
                    (function(){
                        setTimeout(function(){
                            var newTime = new Date().getTime(),
                            timestamp = newTime - startTime,
                            delta = ease(timestamp / duration);
                            el.style[field] = Math.ceil(begin + delta * change) + "px";
                            if(duration <= timestamp){
                                el.style[field] = end + "px";
                                onEnd();
                            } else {
                                setTimeout(arguments.callee,1000/ftp);
                            }
                        },1000/ftp);
                    })();
                },
                play:function(){
                    this.bindMouse();
                    this.autoRun();
                }
            };

            window.JCP_Slide=JCP_Slide;
        })();

        window.onload=function(){
            JCP_Slide("J-Slide").play();
        };
    </script>
</head>
<body>
<div id="J-Slide">
    <ul class="JSlide-list">
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_01.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_02.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_03.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_04.jpg" alt=""/></li>
        <li><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/o_05.jpg" alt=""/></li>
    </ul>
    <ul class="JSlide-num">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="JSlide-mask"></div>
</div>
</body>
</html>

　　運(yùn)行效果：

posted @ 2012-09-06 20:19 artwl 閱讀(6525) 評(píng)論(43) 收藏舉報(bào)

刷新頁面返回頂部

var ME = { "name": "土豆/Artwl", "job": "coding", "languages": [ "JS", "HTML", "CSS", "jQuery" "MVC",".NET", "設(shè)計(jì)模式" ], "hobby": [ "閱讀", "旅游", "音樂", "電影" ] }

分享一個(gè)用原生JavaScript寫的帶緩動(dòng)效果的圖片幻燈

公告

個(gè)人簡介