Javascript学习记录——原生JS实现旋转木马特效

Posted 2020-08-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript学习记录——原生JS实现旋转木马特效相关的知识，希望对你有一定的参考价值。

　　技术分享

　　昨天学习到了JS特效部分，然后老师讲了旋转木马特效的实现，如上图。不过只是讲了通过点击箭头实现图片的切换，对于点击图片本身以及二者联动却是没有讲解。

　　本着一颗追求完美的心，今天花费了一个中午终于将整个功能全部完善（死了太多脑细胞~~）。

　　接下来直接进入主题哈~（主要讲解JS，所以对其中的html及CSS不做详细说明。）

　　首先是HTML代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <link rel="stylesheet" href="css/css.css"/>
</head>
<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" /></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" /></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" /></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" /></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" /></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>
</body>
</html>

　　　　以下为CSS代码：

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0
}

body, button, input, select, textarea {
    font: 12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;
    color: #666;
}

ol, ul {
    list-style: none
}

a {
    text-decoration: none
}

fieldset, img {
    border: 0;
    vertical-align: top;
}

a, input, button, select, textarea {
    outline: none;
}

/*以上为简单的初始化*/

a, button {
    cursor: pointer;
}

.wrap {
    width: 1200px;
    margin: 100px auto;
}

.slide {
    height: 500px;
    position: relative;
}

.slide li {
    position: absolute;
    left: 200px;
    top: 0;
}

.slide li img {
    width: 100%;
}

.arrow {
    opacity: 0;
    position: absolute;
    top: 200px;
    z-index: 1000;
}
.arrow .next{
    left: 1120px;
}
.prev, .next {
    width: 76px;
    height: 112px;
    position: absolute;
    top: 50%;
    margin-top: -56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}

.next {
    right: 0;
    background-image: url(../images/next.png);

　　以下为JS代码：先说明一下整体的思路

　　1、设置鼠标移入移出事件，显示图片中的左右两个箭头

　　2、设置左右两个箭头的点击事件，通过点击箭头，实现配置单中的样式切换（因为获取图片所在的li是一个伪数组，无法使用数组的方法，所以图片的轮播实现主要是通过对配置单内元素索引的改变完成的。）

　　3、设置点击li（也就是图片，后面统一写为li）标签实现点击的li出现在界面最前端。

　　4、实现点击箭头后，点击li的联动，也就是无论点击箭头多少次，再次点击li后，也能将当前点击的li显示在界面最前端。

　　5、实现点击li后，点击箭头的联动，也就是无论点击li后当前界面最前端的li是哪一个，再次点击箭头后，都能按照点击箭头的规则切换到当前li的下一个或上一个li。

　　是不是有点啰嗦啊 0...0

<script>
　　（function(){//今天偶尔看到一篇问文章，其中说道用自调用函数封装自己的JS代码可以防止环境污染哈~好像还有其他很好的功能，还没有详细了解，这里就拿出来爽一下~
    var config = [
        {
            width: 400,
            top: 20,
            left: 50,
            opacity: 0.2,
            zIndex: 2
        },//0
        {
            width: 600,
            top: 70,
            left: 0,
            opacity: 0.8,
            zIndex: 3
        },//1
        {
            width: 800,
            top: 100,
            left: 200,
            opacity: 1,
            zIndex: 4
        },//2
        {
            width: 600,
            top: 70,
            left: 600,
            opacity: 0.8,
            zIndex: 3
        },//3
        {
            width: 400,
            top: 20,
            left: 750,
            opacity: 0.2,
            zIndex: 2
        }//4
    ];//config为一个配置单 规定了每张图片的大小位置层级透明度
    //获取元素
    var wrap = document.getElementById(‘wrap‘)
    var slide = document.getElementById(‘slide‘)
    var ul = slide.children[0]
    var lis = ul.children
    var arrow = document.getElementById(‘arrow‘)
    var arrLeft = document.getElementById(‘arrLeft‘)
    var arrRight = document.getElementById(‘arrRight‘)
    //4.3 因为要控制图片显示的频率，因此要等到每次图片正常切换完成才进行下一次图片切换，假设初始时图片切换完成 flag == true
    var flag = true, count = 2, cFlag = false //7.92 这里设置cFlag初始值为false

    /**
     * 缓动改变样式的函数，先封装这个函数，后面进行配置单内的样式添加只需要调用这个函数就可以了。
     * @param tag 要改变的元素
     * @param json 一个对象，里面以属性保存要修改的样式
     * @param fn 传入函数，可以在第一次调用执行后，再执行传入的函数体内容
     */
    function perfectAnimate(tag, json, fn) {
        clearInterval(tag.timer)//首先清除定时器
        tag.timer = setInterval(function () {//新建一个setInterval,设置周期时间为18ms，这个数字不固定~
            var flag = true //这里运用了假设成立法
            for (var k in json) { //遍历传入的对象
                if (k == ‘opacity‘) { //判断对象中保存的样式，如果为opacity,单独设置
                    var leader = getStyle(tag, k) * 100 //这里获取opacity的初始值。这里使用的是下面获取样式的兼容函数。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //乘100是因为JS小数计算存在精度问题。所以这里在下将其扩大100倍进行使用。
                    var target = json[k] * 100　　//这里取出opacity的目标值，也就是对象中的样式属性值
                    var step = (target - leader) / 10; //这里用目标值减去初始值除以10达到缓动的目的（变速改变）
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);//这里也可以不使用这个判断，对step向上或向下保证最后的时候每次都能至少走1
                    leader = leader + step; //初始值加上每次增加或减少的值
                    tag.style[k] = leader / 100; //将值设置给opacity属性，当然别忘了把100除回来~
                } else if (k == ‘zIndex‘) { 
                    tag.style[k] = json[k] //如果为zIndex 这时候就直接设置给样式就行了。
                } else {
                    var leader = parseInt(getStyle(tag, k)) || 0 //当样式属性值为带单位的时候，这时候要进行一个取整去掉单位，同时为了防止没有初始值而默认为auto，使用一个短路操作
                    var target = json[k]
                    var step = (target - leader) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step) 
                    leader = leader + step
                    tag.style[k] = leader + ‘px‘
                }
                if (target != leader) {
                    flag = false //这里只要有一个没有样式没有设置完成，假设便不成立，便不执行下面的清除
                }
            }
            if (flag) { //假设所有属性都设置完成，便清除定时器，节约空间
                clearInterval(tag.timer)
                // if ("function" == typeof fn) {
                //     fn()
                // }
                fn && fn();//清除定时器后，可能会有需要的功能要在以上执行完成后执行，这里使用一个回调函数，
                           //同样使用短路操作，防止没有传函数而报错。上面注释的与这个功能一样，只是更严谨，这个更简洁
            }
        }, 18)
    }

    /**
     * 获取多个样式的方法的兼容性。current是IE自己的,不支持getComputedStyle
     * @param tag 是标签名
     * @param attr 是具体的某个样式的属性
     * @returns {*} 返回的是这个样式的属性值
     */
    function getStyle(tag, attr) { 
        if (tag.currentStyle) {
            return tag.currentStyle[attr];
        } else {
            return getComputedStyle(tag, null)[attr];
        }
    }

　　//以上准备工作做完，然后可以开始我们代码代码的书写了。
　　//哎呀，好困呀~~还好后面的内容在我中午写的时候已经做好注释了，省了不少时间哇，哈哈哈哈....
　　//建议以序号顺序进行阅读哈，虽然自我感觉挺详细的，但是可能存在某些表述不准确的地方，望谅解~毕竟这才是我的第二篇博客啦...


    /**
     * 1 封装函数，将config中的样式一一对应设置给li标签，因为后面会多次调用它
     */
    function change() {
        for (var i = 0; i < config.length; i++) {
            perfectAnimate(lis[i], config[i], function () {
                flag = true//4.6 这里在perfectAnimate函数中传入函数，赋值flag为true，因为这时候图片切换已经完成，可以进行下一次切换了。

            })
        }
    }

  //2 最开始的默认分布（也就是上图那个效果~），直接调用函数

change() //3 设置移入移出事件，显示与隐藏箭头


    wrap.onmouseover = function () {
        perfectAnimate(arrow, {‘opacity‘: 1})
    }
    wrap.onmouseout = function () {
        perfectAnimate(arrow, {‘opacity‘: 0})
    }

    /**
     *
     */
    function clearChangeConfig2() {
        if (cFlag) { //7.93 因为最开始点击箭头时，没有进行li的点击切换，不需要进行联动，只有点击过li后，再点击箭头才执行，可以
                     // 使用cFlag作为判断条件
            cFlag = false //7.91 这里被调用是需要执行changeConfig1(this.index)里面的if判断，所以首先设置cFlag为false
            for (var i = 0; i < lis.length; i++) {
                //7.4 因为点击li后图片进行切换后，config中的元素又回到初始位置，与设置给li的并不相同，这时就需要
                // 将点击li时最后执行的changeConfig2(this.index)，再退回到changeConfig1(this.index)，要做到上一
                // 步，就需要找到当前点击的li的索引，因为当前点击的li肯定是设置有属性zIndex=4,并且其index属性保存了
                // 其索引值，所以通过这就可以找到需要的索引了。
                if (lis[i].style.zIndex == 4) {
                    changeConfig1(lis[i].index)//7.5 找到索引后直接将config中元素的位置退回到changeConfig1(this.index)

                }
            }
        }
    }


    function pushCount() {
        if (count <= config.length && count > 0) {
            count--
        } else {
            count = 4
        }
    }
    function unshiftCount() {
        if (count < config.length && count >= 0) {
            count++
        } else {
            count = 0
        }
    }

    //4 添加右箭头点击事件

    arrRight.onclick = function () {
        if (flag) {//4.4 如果flag为true,即4.3假设成立，便执行下面的代码
            flag = false//4.5 给flag设置为false,使假设不成立，这时候只要没有改变flag值，点击事件源将不在执行这里的代码，不过此次下面代码依旧会执行
            clearChangeConfig2()//7.3 这里调用是为了点击li后，实现箭头的联动，具体看7.4
            config.push(config.shift())//4.1 点击后将第一个样式剪切到最后一个
            change()//4.2 通过调用函数，将新生成的config元素一一对应设置给li标签

　　//7.0 点击箭头后，实现与li点击联动，每次点击右箭头count值都会自减一次，count初始值为2.小于0后直接赋值为4

 //count的值对应的是每次进行切换后，zIndex值为4的元素在config中的索引值，并以此为初始值（取代6.5设置的2）——界面最前端的配置属性，使得点击li时正常切换

 pushCount()  } } //5 添加左箭头点击事件

    arrLeft.onclick = function () {
        if (flag) {
            flag = false
            clearChangeConfig2()
            config.unshift(config.pop())//5.1 点击后将最后一个样式剪切到第一个
            change() //5.2 通过调用函数，将新生成的config元素一一对应设置给li标签
            unshiftCount()//7.1 将箭头点击与li点击联动，每次点击左箭头count值都会自增一次，count初始值为2.大于4后直接赋值为0
        }

    }
    /**
     * 6.3 根据当前点击的li的索引值，给li设置config内元素中的属性
     * @param i 当前点击li的索引值
     */
    function changeConfig1(i) {
        //6.5 未设置联动时，count位置应该是数字2，即最开始时zIndex值为4的config元素对应的索引，改变的中心思想为：zIndex中值为4的config元素(界面最前端的配置属性)

        //    总是设置给当前的点击的li，保持二者索引一致（count先不管）
        //6.6 然后进行判断，如果当前li的索引值小于等于2
        //7.2 这时将count作为条件依据，等同于以zIndex值为4的元素的索引为依据
        if (i <= count) {
            for (var i = i; i < count; i++) {
                config.push(config.shift())//6.7 那么根据其索引值进行0位config元素的剪切，直到zIndex值为4的config元素对应的索引与当前点击的li的索引一致
                if (cFlag == false) {//7.8 又因为点击li时，config元素与li进行对应设置后，又会回到初始位置，不会影响到count的变化
                                     //所以点击li时调用这个函数不能执行这个if判断，这里再次使用假设成立法，假设cFlag为false时执行if判断成立
                    pushCount()//7.6 因为将config中元素的位置改为正常的后，zIndex=4的元素的索引又会发生变化，所以这时count也要跟着变化
                    i--//7.7 这里的count为--，所以i值也要--才能保证count自减的次数与循环执行次数一致（即与config元素剪切的次数一致，即保证count的值总是配置单中zIndex=4的元素的索引）
                }
            }
        } else {
            for (var i = i; i > count; i--) {
                config.unshift(config.pop())//6.8 如果大于2，那么根据其索引值进行索引为4的config元素的剪切，直到zIndex值为4的config元素对应的索引与当前点击的li的索引一致
                if (cFlag == false) {
                    unshiftCount()
                    i++
                }
            }
        }

    }

    function changeConfig2(i) {
        if (i <= count) {
            for (var i = i; i < count; i++) {
                config.unshift(config.pop())
                if (cFlag == false) {
                    pushCount()
                }
            }
        } else {
            for (var i = i; i > count; i--) {
                config.push(config.shift())
                if (cFlag == false) {
                    unshiftCount()
                }
            }
        }
    }

    //6 遍历lis,给li设置点击事件

    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i//6.4 以lis[i]的自定义属性index保存其索引值
        lis[i].onclick = function () {//6.1 添加事件
            cFlag = true //7.9 点击li时执行changeConfig1(this.index)之前将cFlag赋值true，即不执行它里面的if判断
            changeConfig1(this.index)//6.2 点击li后将zIndex值为4的config元素添加给当前点击的li，其他元素依次挪动。
            change()//6.9通过调用函数，将修改后的config内的元素属性一一对应设置给li
            changeConfig2(this.index)//6.91 在第6.2步中，zIndex值为4config元素进行过剪切可能已经不在索引为2的位置了，这时后我们再进行与6.2步中相反的操作
                                     //     将config中的元素位置回归到初始状态，但是并不设置给li.
        }
    }
　　}())

</script>

　　最后本着负责的态度，还是认真对着上面的文字检查了20分钟，确保在自己水平内将问题讲清楚——可是、好像还是不够太具体化...

　　看来只能等以后的理解更加透彻后，再对本文进行修改了。

　　　　　　　　　　——BY：骑士与魔王（我微博也是这个名字哈，里面还有自己之前玩微博时写的图文小说，《骑士与魔王》，可惜太监啦，哈哈哈哈）

以上是关于Javascript学习记录——原生JS实现旋转木马特效的主要内容，如果未能解决你的问题，请参考以下文章

原生JS-旋转木马

JavaScript实现常用的排序算法

原生js函数的伪重载

JSON.stringify()方法的原生JS实现

前端小白之每天学习记录----简单的原生js路由

Javascript学习记录——一次小项目的总结