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

一、封装运动函数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";
        }

四、最后点感想哈

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 140,587评论 1 295
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 60,384评论 1 254
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 92,492评论 0 206
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 40,584评论 0 171
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,270评论 1 250
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,517评论 1 167
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,227评论 2 266
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,001评论 0 161
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 28,705评论 6 223
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,339评论 0 211
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,105评论 2 211
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,432评论 1 222
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,131评论 0 31
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 26,950评论 2 208
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,335评论 3 200
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,571评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 25,897评论 0 163
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,295评论 2 226
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,414评论 2 228

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,360评论 25 707
  • 原理 图片轮播原理:将一系列大小相等的图片平铺,利用css布局只显示一张图片,其他图片隐藏,通过计算偏移量利用定时...
    黎贝卡beka阅读 2,127评论 1 2
  • 轮播图这厮是我们浏览网页时常见的一种形式。而相较传统的轮播图而言,呼吸轮播图具有更美观,更cool,更多特效。因而...
    非的干不过欧的阅读 818评论 0 0
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,446评论 4 58
  • 一般我们都会base64上传图片,代码如下: 然后服务器要求file文件格式上传:服务器要求需要传入的参数下图所示...
    480a52903ce5阅读 13,024评论 1 6