1.先寫(xiě)靜態(tài)的html酿箭、css代碼

Html

<div class="carousel" id="carousel">
  <div class="btns">
    <a class="leftBtn"  id="leftBtn"></a>
    <a class="rightBtn" id="rightBtn"></a>
  </div>
  <div class="imageslist" id="imageslist">
    <ul>
      <li class="first"><a>![](images/one.jpg)</a></li>
      <li><a href="">![](images/two.jpg)</a></li>
       <li><a href="">![](images/three.jpg)</a></li>
       <li><a href="">![](images/four.jpg)</a></li>
      <li><a href="">![](images/five.jpg)</a></li>
    </ul>
  </div>
  <div class="circles" id="circles">
    <ol>
      <li class="cur"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
</div>

2.css樣式的設(shè)置复亏，靈活性比較大，因?yàn)檫@要根據(jù)我們的頁(yè)面來(lái)做具體設(shè)置和規(guī)定缭嫡，下面的效果僅供參考缔御！ 我們直接上代碼：

Css

       *{
            margin: 0;
            padding: 0;
        }
        .carousel{
            width: 780px;
            height: 439px;
            margin: 100px auto;
            border: 1px solid #333;
            position: relative;
        }
        .carousel ul{
            list-style: none;
        }
        .carousel ul li{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter:alpha(opacity = 0);
        }
        .carousel ul li.first{
            opacity: 1;
            filter:alpha(opacity = 0);
        }
        .btns a{
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            margin-top: -20px;
            background-color: orange;
            font-size: 30px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            font-weight: bold;
            cursor: pointer;
            z-index: 999;
        }
        .btns a:hover{
            background-color: gold;
        }
        .leftBtn{
            left: 10px;
        }
        .rightBtn{
            right: 10px;
        }
        .circles{
            position: absolute;
            width: 150px;
            height: 16px;
            bottom: 10px;
            right: 10px;
        }
        .circles ol{
            list-style: none;
        }
        .circles ol li{
            float: left;
            width: 16px;
            height: 16px;
            background-color: orange;
            margin-right: 6px;
            border-radius: 50%;
            cursor: pointer;
        }
        .circles ol li.cur{
            background-color: red;
        }

3.好了，到此我們的靜態(tài)的效果已經(jīng)搭建好妇蛀，要想實(shí)現(xiàn)我們需要的功能js是我們的核心耕突，下面我們就用代碼來(lái)實(shí)現(xiàn)它：

關(guān)鍵技術(shù)一：我們的輪播圖要?jiǎng)悠饋?lái)，利用定時(shí)器現(xiàn)在自動(dòng)滾動(dòng)的效果评架，圖片的轉(zhuǎn)換牽涉到了層疊

做到這些眷茁，是我們js的第一步。等等纵诞，因?yàn)閹缀跛械妮啿ザ家獙?shí)現(xiàn)這些效果上祈，我們可以做一個(gè)封裝，隨時(shí)調(diào)用

我在這里封裝了一個(gè)名叫animate的函數(shù)浙芙，函數(shù)封裝完成后我們只需要調(diào)用即可實(shí)現(xiàn)：

function animate(elem , targetJSON , time , tweenString , callback){
    //函數(shù)重載登刺，用戶(hù)傳進(jìn)來(lái)的參數(shù)數(shù)量、類(lèi)型可能不一樣
    //檢查數(shù)量和類(lèi)型
    if(arguments.length < 3 || typeof arguments[0] != "object" || typeof arguments[1] != "object" || typeof arguments[2] != "number"){
        throw new Error("對(duì)不起嗡呼，你傳進(jìn)來(lái)的參數(shù)數(shù)量不對(duì)或者參數(shù)類(lèi)型不對(duì)纸俭，請(qǐng)仔細(xì)檢查哦！");
        return;
    }else if(arguments.length == 3){
        //用戶(hù)只傳進(jìn)來(lái)3個(gè)參數(shù)晤锥，表示tweenString掉蔬、callback被省略了，那么我們默認(rèn)使用Linear當(dāng)做緩沖詞
        tweenString = "Linear";
        //默認(rèn)回調(diào)函數(shù)是null
        callback = null;
    }else if(arguments.length == 4){
        //用戶(hù)只傳進(jìn)來(lái)4個(gè)參數(shù)矾瘾，第4個(gè)參數(shù)可能傳進(jìn)來(lái)的是tweenString女轿，也可能是callback
        switch(typeof arguments[3]){
            case "string" : 
                //用戶(hù)傳進(jìn)來(lái)的是緩沖描述詞兒，所以就把callback補(bǔ)為null
                callback = null;
                break;
            case "function" : 
                callback = arguments[3];
                tweenString = "Linear";
                break;
            default : 
                throw new Error("抱歉壕翩，第4個(gè)參數(shù)要么是緩沖描述詞蛉迹，要么是回調(diào)函數(shù)，請(qǐng)檢查放妈！");
        }
    }

    //動(dòng)畫(huà)間隔要根據(jù)不同瀏覽器來(lái)設(shè)置：
    if(window.navigator.userAgent.indexOf("MSIE") != -1){
        var interval = 50;  
    }else{
        var interval = 20;
    }

    //強(qiáng)行給我們的動(dòng)畫(huà)元素增加一個(gè)isanimated的屬性北救，是否正在運(yùn)動(dòng)
    elem.isanimated = true;

    //初始狀態(tài)，放在origninalJSON里面
    var originalJSON = {};
    //變化的多少芜抒，放在deltaJSON里面
    var deltaJSON = {};
    //給信號(hào)量對(duì)象添加屬性珍策，添加什么屬性，目標(biāo)對(duì)象中有什么屬性宅倒，這里就添加什么屬性
    //值就是當(dāng)前的計(jì)算樣式
    for(var k in targetJSON){
        //初試JSON
        originalJSON[k] = parseFloat(fetchComputedStyle(elem , k));
        //把每個(gè)targetJSON中的值都去掉px
        targetJSON[k] = parseFloat(targetJSON[k]);
        //變化量JSON
        deltaJSON[k] = targetJSON[k] - originalJSON[k];
    }

    // 至此我們得到了三個(gè)JSON：
    // originalJSON 初始狀態(tài)集合攘宙，這個(gè)JSON永遠(yuǎn)不變
    // targetJSON 目標(biāo)狀態(tài)集合，這個(gè)JSON永遠(yuǎn)不變
    // deltaJSON  差值集合，這個(gè)JSON永遠(yuǎn)不變
    // console.log(originalJSON);
    // console.log(targetJSON);
    // console.log(deltaJSON);

    //總執(zhí)行函數(shù)次數(shù)：
    var maxFrameNumber = time / interval;
    //當(dāng)前幀編號(hào)
    var frameNumber = 0;
    //這是一個(gè)臨時(shí)變量一會(huì)兒用  
    var n;
    //定時(shí)器
    var timer = setInterval(function(){
        //要讓所有的屬性發(fā)生變化
        for(var k in originalJSON){
            //動(dòng)：
            // n就表示這一幀應(yīng)該在的位置：
            n = Tween[tweenString](frameNumber , originalJSON[k] , deltaJSON[k] , maxFrameNumber);
            //根據(jù)是不是opacity來(lái)設(shè)置單位
            if(k != "opacity"){
                elem.style[k] = n + "px";
            }else{
                elem.style[k] = n;
                elem.style.filter = "alpha(opacity=" + n * 100 + ")";
            }
        }

        //計(jì)數(shù)器
        frameNumber++;
        if(frameNumber == maxFrameNumber){
            //次數(shù)夠了蹭劈，所以停表疗绣。
            //這里抖一個(gè)小機(jī)靈，我們強(qiáng)行讓elem跑到targetJSON那個(gè)位置
            for(var k in targetJSON){
                if(k != "opacity"){
                    elem.style[k] = targetJSON[k] + "px";
                }else{
                    elem.style[k] = targetJSON[k];
                    elem.style.filter = "alpha(opacity=" + (targetJSON[k] * 100) + ")";
                }
            }
            //停表
            clearInterval(timer);
            //拿掉是否在動(dòng)屬性铺韧，設(shè)為false
            elem.isanimated = false;
            //調(diào)用回調(diào)函數(shù)多矮，并且讓回調(diào)函數(shù)中的this表示運(yùn)動(dòng)的對(duì)象
            //我們加上了判斷，如果callback存在哈打，再執(zhí)行函數(shù)
            callback && callback.apply(elem);
        }
    },interval);

    //之前的輪子塔逃，計(jì)算后樣式
    function fetchComputedStyle(obj , property){
        //能力檢測(cè)
        if(window.getComputedStyle){
            //現(xiàn)在要把用戶(hù)輸入的property中檢測(cè)一下是不是駝峰，轉(zhuǎn)為連字符寫(xiě)法
            //強(qiáng)制把用戶(hù)輸入的詞兒里面的大寫(xiě)字母前酿，變?yōu)樾?xiě)字母加-
            //paddingLeft  →  padding-left
            property = property.replace(/([A-Z])/g , function(match,$1){
                return "-" + $1.toLowerCase();
            });

            return window.getComputedStyle(obj)[property];
        }else{
            //IE只認(rèn)識(shí)駝峰患雏，我們要防止用戶(hù)輸入短橫，要把短橫改為大寫(xiě)字母
            //padding-left  → paddingLeft 
            property = property.replace(/\-([a-z])/g , function(match,$1){
                return $1.toUpperCase();
            });

            return obj.currentStyle[property];
        }
    }

    //緩沖的公式
    var Tween = { 
        Linear: function(t, b, c, d) {
            return c * t / d + b;
        }

關(guān)鍵技術(shù)二：有了animate的封裝函數(shù)罢维， 為我們節(jié)省了不少的力氣淹仑，可是我們面對(duì)不用的要求還要

有不同的效果，下面就讓我們來(lái)實(shí)現(xiàn)具體的效果肺孵！

Java Script

引入我們封裝的animate函數(shù)：

<script type="text/javascript" src="animate.js"></script>

然后得到carousel

    <script type="text/javascript">
        var carousel = document.getElementById("carousel");
        //得到li
        var lis = document.getElementById("imageslist").getElementsByTagName("li");
        //得到按鈕
        var leftBtn = document.getElementById("leftBtn");
        var rightBtn = document.getElementById("rightBtn");
        //得到小圓點(diǎn)
        var circlesLi = document.getElementById("circles").getElementsByTagName("li");
        //圖片數(shù)量
        var imgLength = lis.length;
        //圖片寬度
        var width = 560;
        //滾動(dòng)速度
        var animatetime = 300;
        //緩沖描述
        var tween = "Linear";
        //間隔時(shí)間
        var interval = 2000;
        var idx = 0;

自動(dòng)輪播

        var timer = setInterval(rightBtnHandler,interval);
        //鼠標(biāo)進(jìn)入停止
        carousel.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠標(biāo)離開(kāi)開(kāi)始
        carousel.onmouseout = function(){
            timer = setInterval(rightBtnHandler,interval);
        }

右按鈕的監(jiān)聽(tīng)

        rightBtn.onclick = rightBtnHandler;

        function rightBtnHandler(){
            //函數(shù)截流
            if(lis[idx].isanimated) return;

            //原來(lái)的信號(hào)量的圖片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信號(hào)量改變
            idx++;
            if(idx > imgLength - 1){
                idx = 0;
            }
            //新信號(hào)量的圖片淡入
            animate(lis[idx],{"opacity" : 1},1000);

            changeCircle();
        }

左按鈕的監(jiān)聽(tīng)

        leftBtn.onclick = function(){
            //函數(shù)截流
            if(lis[idx].isanimated) return;

            //原來(lái)的信號(hào)量的圖片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信號(hào)量改變
            idx--;
            if(idx < 0){
                idx = imgLength - 1;
            }
            //新信號(hào)量的圖片淡入
            animate(lis[idx],{"opacity" : 1},1000);

            changeCircle();
        }

批量添加小圓點(diǎn)的監(jiān)聽(tīng)

        for(var i = 0 ; i <= imgLength - 1 ; i++){
            circlesLi[i].index = i; //先編號(hào)
            circlesLi[i].onclick = function(){
                //截流
                if(lis[idx].isanimated) return;
                
                //原來(lái)的信號(hào)量的圖片淡出
                animate(lis[idx],{"opacity" : 0},1000);
                //信號(hào)量改變
                idx = this.index;
                //新信號(hào)量的圖片淡入
                animate(lis[idx],{"opacity" : 1},1000);

                changeCircle();
            }
        }

更換小圓點(diǎn)函數(shù)

        function changeCircle(){
            //去掉所有小圓點(diǎn)的cur
            for (var i = 0; i < circlesLi.length; i++) {
                circlesLi[i].className = "";
            }
            //第信號(hào)量這個(gè)小圓點(diǎn)加cur
            circlesLi[idx].className = "cur";
        }
 <script>

OK匀借，到此為止，呼吸輪播所有代碼完成平窘！