学习Js-day17

轮播图

简单轮播图的实现：

（自动轮播，小圆点切换图片，左右按钮切换图片，鼠标移入有左右切换图标，移出消失，鼠标悬停停止轮播，移开继续轮播）

HTML

首先是html内容，布局很简单，一个图片列表，两个按钮

<div class="box">
        <!-- 移动的是这个ul -->
        <ul class="banner">
            <li class="first"><img src="./🐟/7.jpg" alt=""></li>
            <li><img src="./🐟/8.jpg" alt=""></li>
            <li><img src="./🐟/9.jpg" alt=""></li>
            <li><img src="./🐟/97.jpg" alt=""></li>
            <li><img src="./🐟/98.jpg" alt=""></li>
        </ul>
        <div class="pre">&lt;</div>
        <div class="next">&gt;</div>
    </div>

CSS

思路：父容器box相对定位，列表ul绝对定位，实现让所有图片重叠在父容器内，利用z-index来设置图片高度，图片高度最高会显示在顶层上，在整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要被图片高。

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: 100px auto;
            border: 3px solid gainsboro;
        }

        .banner {
            width: 800%;
            height: 100%;
            position: absolute;
        }

        .banner>li {
            list-style: none;
            float: left;
            width: 500px;
            height: 100%;
        }

        .banner>li img {
            width: 100%;
            height: 100%;
        }

        ol {
            position: absolute;
            z-index: 1;
            bottom: 10px;
            right: 10px;
        }

        ol>li {
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 2px #ccc;
            margin-left: 5px;
            float: left;
        }

        .selected {
            background-color: black;
        }

        .box>div {
            position: absolute;
            z-index: 99px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            color: #333;
            font-weight: bold;
            top: 50%;
            margin-top: -15px;
            display: none;
        }

        .banner.first {
            background-color: pink;
        }
        .pre {
            left: 0;
        }

        .next {
            right: 0;
        }
    </style>

JS部分

 

<script src="./move.plus.js"></script>
<script>
        //获取ul
        var banner = document.querySelector('.banner')
        //获取li的宽度
        var liWidth = banner.children[0].offsetWidth
        //记录一下原本的li的个数
        var length = banner.children.length
        //初始化生成对应的焦点列表
        init(length)
        //获取焦点列表
        var focusList = document.querySelectorAll('ol>li')
        //给ul的后面再添加第一个li
        //克隆第一个
        var clone = banner.children[0].cloneNode(true)
        banner.appendChild(clone)
        //定时器控制移动
        var index = 0
        //定时器
        var timer
        //获取对应的俩个按钮
        var prevBtn = document.querySelector('.pre')
        var nextBtn = document.querySelector('.next')
        //调用的对应的方法
        autoMove()
        handlerFocusClick()
        handlerMouseBox()
        handlerChange()
        //自动移动
        function autoMove() {
            timer = setInterval(() => {
                change()
            }, 2000);
        }
        //移动和切焦点的操作 isRight是否往右 默认就往右
        function change(isRight=true){
                if(isRight){
                    index++
                    if (index == length + 1) {
                        //强行设置对应的为第一个
                        banner.style.left = '0px'
                        //控制对应的下标为0
                        index = 0
                    }
                }else{
                    index--
                    //如果到第一个应该切到最后一个
                    if (index == -1){
                        //强行设置对应的最后一个
                        banner.style.left = length*-1*liWidth+'px'
                        index = length - 1
                    }
                }
                setFocus(index)
                // move('.banner').set('left', -1*liWidth * index + 'px').end()
                // move('.banner').to(-liWidth * index, 0).end()
                move(banner, {
                    left: -liWidth * index
                }, true)
        }
        //生成一个ol ol里面包含的li个数和对应的ul里面的li个数一样
        function init(length) {
            var ol = document.createElement('ol')
            //根据对应的个数生成
            for (var i = 0; i < length; i++) {
                if (i == 0) {
                    ol.innerHTML += `<li class="selected"></li>`
                } else {
                    ol.innerHTML += `<li></li>`
                }
            }
            //添加进去
            banner.parentElement.appendChild(ol)
        }
        //设置对应的焦点
        function setFocus(index) {
            //超出范围等于0
            if (index > length - 1) {
                index = 0
            }
            //小于0 等于最大下标
            if (index < 0) {
                index = length - 1
            }
            //排他
            //先把所有的全部清除 再给自己设置
            // 获取所有的ol里面的li
            Array.from(focusList).forEach((li) => {
                li.className = ''
            })
            focusList[index].className = 'selected'
        }
        //焦点点击事件
        function handlerFocusClick() {
            //事件委托机制
            focusList[0].parentElement.onclick = function (e) {
                e = e || window.event
                clearInterval(timer)
                if (e.target.nodeName == 'LI') {
                    var i = Array.from(focusList).findIndex((li) => {
                        return li == e.target
                    })
                    //移动到对应的位置
                    move(banner, {
                        left: -liWidth * i
                    }, true)
                    //切焦点
                    setFocus(i)
                    //将i赋值给index
                    index = i
                    // autoMove() 
                }
            }
        }
        //移动动盒子上面
        function handlerMouseBox() {
            banner.parentElement.onmouseenter = () => {
                //控制俩个div显示
                nextBtn.style.display = 'block'
                prevBtn.style.display = 'block'
                //清除动画
                clearInterval(timer)
            }
            banner.parentElement.onmouseleave = () => {
                //控制俩个div隐藏
                nextBtn.style.display = 'none'
                prevBtn.style.display = 'none'
                //开始动画
                autoMove()
            }
        }
        //左右切换处理
        function handlerChange() {
            //左边的事件
            prevBtn.onclick = function () {
                change(false)
            }
            //右边的事件
            nextBtn.onclick = function () {
                change()
            }
        }
    </script>