呼吸轮播图的制作

网页排版中，轮播图可以说很常见，轮播图种类有好几种，今天分享一下呼吸轮播图的制作过程。

效果展示

转到动画

制作过程

html部分

HTML中的标签代码如下，包括左右按钮，5张图片以及5个小圆点。

    <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/0.png)</a></li>
                <li><a>![](images/1.png)</a></li>
                <li><a>![](images/2.png)</a></li>
                <li><a>![](images/3.png)</a></li>
                <li><a>![](images/4.png)</a></li>
                                 //插入5张图片。
            </ul>
        </div>
        <div class="circles" id="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                                //这边是5个小圆点
            </ol>
        </div>
    </div>

效果图如下：

image.png

css部分

css排版内容不难，代码就不多注释了。

        *{
            margin: 0;
            padding: 0;
        }
        .carousel{
            width: 560px;
            height: 300px;
            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);
        }//设置所有图片的透明度设为0；
        .carousel ul li.first{
            opacity: 1;
            filter:alpha(opacity = 100);
        }//单独把第一张图片透明度调成1，这是初始状态。
        .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;
        }//当前圆点的颜色变红。

到这里所有的样式排版都已准备好，接下来就是重要的js实现动画的部分了。

js部分

js部分可以分为三个部分：自动呼吸轮播，左右按钮控制以及小圆点控制。

    <script type="text/javascript" src="animate-2.0.1.js"></script>
        //首先要用到事先准备的js动画库，主要功能是实现每张图片的淡入淡出的动画。

    <script type="text/javascript">
        
        var carousel = document.getElementById("carousel");//得到大容器
        
        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;//图片序号（信号量），这个很重要，是全局变量，3个轮播控制方式的连接点。

第一部分：自动轮播
首先写出图片切换到下一张的函数rightBtnHandler()。
      function rightBtnHandler(){
            
            if(lis[idx].isanimated) return;//函数截流
                        // isanimated是动画库里面设定的标记，判断当前是否在动画过程中，如果为true，说明它正在执行动画，那么这个函数就不会执行下去，这样就避免了图片还在动画中就狂点按钮造成的混乱。
            
            
            animate(lis[idx],{"opacity" : 0},1000); //原来的信号量的图片淡出
            
            idx++;   //信号量改变

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

            changeCircle();//注意：此时也要改变右下角小圆点的变化，这个函数后面有介绍。
        }



//自动轮播部分
        var timer = setInterval(rightBtnHandler,interval)//rightBtnHandler是图片切换到下一张的函数。

        //鼠标进入停止自动轮播。
        carousel.onmouseover = function(){
            clearInterval(timer);
        }

        //鼠标离开开始自动轮播。
        carousel.onmouseout = function(){
            timer = setInterval(rightBtnHandler,interval);
        }

//按钮控制轮播
        
        //右按钮的监听，点击时执行一次转到下一张图片的函数。
        rightBtn.onclick = rightBtnHandler;         

        //左按钮的监听
        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";//当前小圆点样式增加一个cur类别，让它变红色。
        }
    </script>

就这样，呼吸轮播图就大功告成了，js部分主要分成三部分来控制，还要注意的是图片的信号量是全局变量，三个部分共用一个信号量。
关于呼吸轮播图的制作分享到此，希望大家能够喜欢。