1.先写静态的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样式的设置，灵活性比较大，因为这要根据我们的页面来做具体设置和规定，下面的效果仅供参考！ 我们直接上代码：

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.好了，到此我们的静态的效果已经搭建好，要想实现我们需要的功能js是我们的核心，下面我们就用代码来实现它：

关键技术一：我们的轮播图要动起来，利用定时器现在自动滚动的效果，图片的转换牵涉到了层叠

做到这些，是我们js的第一步。等等，因为几乎所有的轮播都要实现这些效果，我们可以做一个封装，随时调用

我在这里封装了一个名叫animate的函数，函数封装完成后我们只需要调用即可实现：

function animate(elem , targetJSON , time , tweenString , callback){
    //函数重载，用户传进来的参数数量、类型可能不一样
    //检查数量和类型
    if(arguments.length < 3 || typeof arguments[0] != "object" || typeof arguments[1] != "object" || typeof arguments[2] != "number"){
        throw new Error("对不起，你传进来的参数数量不对或者参数类型不对，请仔细检查哦！");
        return;
    }else if(arguments.length == 3){
        //用户只传进来3个参数，表示tweenString、callback被省略了，那么我们默认使用Linear当做缓冲词
        tweenString = "Linear";
        //默认回调函数是null
        callback = null;
    }else if(arguments.length == 4){
        //用户只传进来4个参数，第4个参数可能传进来的是tweenString，也可能是callback
        switch(typeof arguments[3]){
            case "string" : 
                //用户传进来的是缓冲描述词儿，所以就把callback补为null
                callback = null;
                break;
            case "function" : 
                callback = arguments[3];
                tweenString = "Linear";
                break;
            default : 
                throw new Error("抱歉，第4个参数要么是缓冲描述词，要么是回调函数，请检查！");
        }
    }

    //动画间隔要根据不同浏览器来设置：
    if(window.navigator.userAgent.indexOf("MSIE") != -1){
        var interval = 50;  
    }else{
        var interval = 20;
    }

    //强行给我们的动画元素增加一个isanimated的属性，是否正在运动
    elem.isanimated = true;

    //初始状态，放在origninalJSON里面
    var originalJSON = {};
    //变化的多少，放在deltaJSON里面
    var deltaJSON = {};
    //给信号量对象添加属性，添加什么属性，目标对象中有什么属性，这里就添加什么属性
    //值就是当前的计算样式
    for(var k in targetJSON){
        //初试JSON
        originalJSON[k] = parseFloat(fetchComputedStyle(elem , k));
        //把每个targetJSON中的值都去掉px
        targetJSON[k] = parseFloat(targetJSON[k]);
        //变化量JSON
        deltaJSON[k] = targetJSON[k] - originalJSON[k];
    }

    // 至此我们得到了三个JSON：
    // originalJSON 初始状态集合，这个JSON永远不变
    // targetJSON 目标状态集合，这个JSON永远不变
    // deltaJSON  差值集合，这个JSON永远不变
    // console.log(originalJSON);
    // console.log(targetJSON);
    // console.log(deltaJSON);

    //总执行函数次数：
    var maxFrameNumber = time / interval;
    //当前帧编号
    var frameNumber = 0;
    //这是一个临时变量一会儿用  
    var n;
    //定时器
    var timer = setInterval(function(){
        //要让所有的属性发生变化
        for(var k in originalJSON){
            //动：
            // n就表示这一帧应该在的位置：
            n = Tween[tweenString](frameNumber , originalJSON[k] , deltaJSON[k] , maxFrameNumber);
            //根据是不是opacity来设置单位
            if(k != "opacity"){
                elem.style[k] = n + "px";
            }else{
                elem.style[k] = n;
                elem.style.filter = "alpha(opacity=" + n * 100 + ")";
            }
        }

        //计数器
        frameNumber++;
        if(frameNumber == maxFrameNumber){
            //次数够了，所以停表。
            //这里抖一个小机灵，我们强行让elem跑到targetJSON那个位置
            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);
            //拿掉是否在动属性，设为false
            elem.isanimated = false;
            //调用回调函数，并且让回调函数中的this表示运动的对象
            //我们加上了判断，如果callback存在，再执行函数
            callback && callback.apply(elem);
        }
    },interval);

    //之前的轮子，计算后样式
    function fetchComputedStyle(obj , property){
        //能力检测
        if(window.getComputedStyle){
            //现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
            //强制把用户输入的词儿里面的大写字母，变为小写字母加-
            //paddingLeft  →  padding-left
            property = property.replace(/([A-Z])/g , function(match,$1){
                return "-" + $1.toLowerCase();
            });

            return window.getComputedStyle(obj)[property];
        }else{
            //IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
            //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;
        }

关键技术二：有了animate的封装函数， 为我们节省了不少的力气，可是我们面对不用的要求还要

有不同的效果，下面就让我们来实现具体的效果！

Java Script

引入我们封装的animate函数：

<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");
        //得到小圆点
        var circlesLi = document.getElementById("circles").getElementsByTagName("li");
        //图片数量
        var imgLength = lis.length;
        //图片宽度
        var width = 560;
        //滚动速度
        var animatetime = 300;
        //缓冲描述
        var tween = "Linear";
        //间隔时间
        var interval = 2000;
        var idx = 0;

自动轮播

        var timer = setInterval(rightBtnHandler,interval);
        //鼠标进入停止
        carousel.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠标离开开始
        carousel.onmouseout = function(){
            timer = setInterval(rightBtnHandler,interval);
        }

右按钮的监听

        rightBtn.onclick = rightBtnHandler;

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

            //原来的信号量的图片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信号量改变
            idx++;
            if(idx > imgLength - 1){
                idx = 0;
            }
            //新信号量的图片淡入
            animate(lis[idx],{"opacity" : 1},1000);

            changeCircle();
        }

左按钮的监听

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

            //原来的信号量的图片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信号量改变
            idx--;
            if(idx < 0){
                idx = imgLength - 1;
            }
            //新信号量的图片淡入
            animate(lis[idx],{"opacity" : 1},1000);

            changeCircle();
        }

批量添加小圆点的监听

        for(var i = 0 ; i <= imgLength - 1 ; i++){
            circlesLi[i].index = i; //先编号
            circlesLi[i].onclick = function(){
                //截流
                if(lis[idx].isanimated) return;
                
                //原来的信号量的图片淡出
                animate(lis[idx],{"opacity" : 0},1000);
                //信号量改变
                idx = this.index;
                //新信号量的图片淡入
                animate(lis[idx],{"opacity" : 1},1000);

                changeCircle();
            }
        }

更换小圆点函数

        function changeCircle(){
            //去掉所有小圆点的cur
            for (var i = 0; i < circlesLi.length; i++) {
                circlesLi[i].className = "";
            }
            //第信号量这个小圆点加cur
            circlesLi[idx].className = "cur";
        }
 <script>

OK，到此为止，呼吸轮播所有代码完成！