呼吸轮播图中注意的几个“点”

字数 685阅读 84

一、封装运动函数animate

对于呼吸轮播图,我们要考虑运动函数中包含的必要参数,为实现效果和作用铺好基石。①需要改变的对象;②要改变的对象某属性及终止状态;③轮播图都有运动或变化过程的时间,可谓运动时间或对象属性变化的时间;还有两个,比如考虑到变化的快慢状态是匀速还是先快后慢等的缓冲状态,④可选择增加缓冲状态描述词,以供缓冲状态函数的调用;有时候考虑运动的重复性,⑤可选择增加回调函数。那么封装的运动函数形式如下:

function animate(elem , targetJSON , time , tweenString , callback){
  //每个参数的意义与上面的序号对应
  //函数内部分析运动可能改变的那些常用属性及如何获取
  //给要改变的对象添加需要改变的属性
  //控制缓冲状态
  //...
}

其实,封装运动函数是个庞大的工作量,考虑的方面很多,所以呢,大神封装好的运动函数我们拿来用就好,明白上面的前三个必要参数,会给轮播图带来的效果呈现。

dog.gif

二、呼吸轮播图的html及css(元素及布局)

看到上面的动图后,五张不同的图片,怎么就能实现呼吸轮播呢?呼吸轮播图有个显著的特点:淡入淡出,即图片的透明度发生改变。还有一个就是间隔时间,信号量的改变。轮播图上有左右侧按钮、下方图片信号量改变的小圆点。

效果截图.png

来看下html结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>呼吸轮播图</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
      <!--最外层div容器,包含内容 -->
    <div class="container" id="container">
      <!--左右侧按钮-->
        <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.jpg)</a></li>
                <li><a>![](./images/1.jpg)</a></li>
                <li><a>![](./images/2.jpg)</a></li>
                <li><a>![](./images/3.jpg)</a></li>
                <li><a>![](./images/4.jpg)</a></li>
            </ul>
        </div>
        <!--图片信号量代表的小圆点 -->
        <div class="circles" id="circles">
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    <script type="text/javascript" src="animate-2.0.1.js"></script>
    <script type="text/javascript"></script>
</body>
</html>

再来看下css文件:

      *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #333;
            position: relative;
        }
        .container ul{
            list-style: none;
           /*去掉无序列表的样式*/
        }
        .container ul li{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter:alpha(opacity = 0);
        }
        .container ul li.first{
            opacity: 1;
            filter:alpha(opacity = 100);
        }
        .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.current{
            background-color: red;
        }

综合来看,html结构和css布局不是很难写,ok,上面的代码能实现效果截图的布局。

三、呼吸轮播图的js代码(主角、重头戏)

通过DOM节点获取html中的元素,还有要声明一些变量


//得到container容器
      var container = document.getElementById("container");
//得到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);
        //鼠标进入停止
        container.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠标离开开始
        container.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(){
            
            // 一点击就会执行此函数。 如果我点击非常快,
            //    比如0.5秒一次, 那么函数将会 每个0.5秒执行1次
            //  为了解决动画没有完成,就执行下一次的问题,必须做点事情
            //     标记 当前是否是在动画过程中

            //  对象.isanimated   标记: 如果为true,说明它正在执行动画
            
            // 对象.xxx    undefined   假的

            //函数截流
            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(){
            //去掉所有小圆点的current
            for (var i = 0; i < circlesLi.length; i++) {
                circlesLi[i].className = "";
            }
            //给信号量这个小圆点加current
            circlesLi[idx].className = "current";
        }

四、最后点感想哈

人生在世要如意,日夜都要练代码。

呼吸轮播图的精髓在上面代码块了,其实挺让人纠结的地方就是图片信号量的定时器函数构建上。如此的代码块着实需要多多练习,多多思考。

推荐阅读更多精彩内容