旋转木马案例

重点难点

1.数组的运用
2.事件的添加
3.逻辑关系

效果图

代码

Css

@charset "UTF-8";
/*初始化  reset*/
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;
}
.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);
}

Html

<div class="wrap" id="wrap">
  <div class="slide" id="slide">
    <ul>
      <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></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>

Js

window.onload = function () {
    let slide = document.querySelector(".slide");
    let li = document.querySelectorAll("li");
    let arrow = document.querySelector(".arrow");
    let prev = this.document.querySelector(".prev");
    let next = this.document.querySelector(".next");

    let bol = true;

    let arr = [{
            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

    ];

    // 封装的函数
    // 判断浏览器是否自持方法，得到css返回值
    function getStyle(element, attr) {
        //判断浏览器是否支持这个方法
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }

    // 封装点击事件移动函数
    //设置任意的一个元素,移动到指定的目标位置
    function fn(element, json, fn1) {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            var flag = true; //判断目标到达
            for (const attr in json) {
                //判断这个属性attr中是不是opacity
                if (attr == "opacity") {
                    //获取元素的当前的透明度，放大一百倍
                    var current = getStyle(element, attr) * 100;
                    // 当前属性对应的目标值,放大一百倍
                    var target = json[attr] * 100;
                    //每次移动的距离
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
                    current += step;
                    element.style[attr] = current / 100;
                } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
                    element.style[attr] = json[attr];

                } else {
                    //获取元素的当前的位置,数字类型
                    var current = parseInt(getStyle(element, attr));
                    // 当前属性对应的目标值
                    var target = json[attr];
                    //每次移动的距离
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
                    current += step;
                    element.style[attr] = current + "px";
                }

                if (current != target) {
                    flag = false;
                }
            }
            if (flag) {
                //清理定时器
                clearInterval(element.timeId);
                // 所有属性到达目标后才能使用，并且用户有输入函数
                if (fn1) {
                    fn1();
                }
            }
        }, 20);
    }


    fs = () => {
        for (let i = 0; i < li.length; i++) {
            fn(li[i], arr[i], () => {
                bol = true;
            });
        }
    }
    fs();

    // 左
    prev.onclick = () => {
        if (bol) {
            bol = false;
            arr.unshift(arr.pop());
            fs();
        }
    }

    // 右
    next.onclick = () => {
        if (bol) {
            bol = false;
            arr.push(arr.shift());
            fs();
        }
    }

    slide.onmouseover = () => {
        fn(arrow, {
            "opacity": 1
        })
    }
    slide.onmouseout = () => {
        fn(arrow, {
            "opacity": 0
        })
    }
}