web网页常见特效3——轮播图

HTML结构分析

1. 首先要有一个大的fouce盒子，里面存放图片，小圆点，左右按钮
2. 在focus中里面有一个ul，在这个ul中有li，装着一个个图片
3. 在focus中有一个ol，在li中是一个个底部小圆点
4. 在focus中有两个按钮，btnlet,btnright

 <!-- 轮播图的大盒子 -->
    <div class="focus">
        <!-- 装图片的盒子 -->
        <ul>
            <li>
                <a href="#"><img src="upload/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="upload/focus3.jpg" alt=""></a>
            </li>
        </ul>
        <!-- 轮播图底部的小圆点 -->
        <ol>

        </ol>
        <!-- 左右按钮 -->
        <div class="btnleft"></div>
        <div class="btnright"></div>
    </div>

CSS代码展示

 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .focus {
            position: relative;
            width: 721px;
            height: 455px;
            margin: auto;
            overflow: hidden;
        }

        .focus ul {
            position: absolute;
            left: 0;
            width: 500%;
            height: 100%;
            border: 1px solid #ccc;
        }

        .focus ul li {
            float: left;
            width: 721px;
        }

        .focus ol {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 8px;

        }

        .focus ol li {
            float: left;
            margin: 5px;
            width: 8px;
            height: 8px;
            border: 1px solid #fff;
            border-radius: 50%;
        }

        /* 底部小圆点高亮 */
        .active {
            background-color: #fff;
        }

        .focus .btnleft {
            position: absolute;
            left: 0;
            width: 20px;
            height: 50px;
            top: 50%;
            background-color: #fff;
        }

        .focus .btnright {
            position: absolute;
            right: 0;
            width: 20px;
            height: 50px;
            top: 50%;
            background-color: #fff;
        }
    </style>

JavaScript代码分析

轮播大的模块无非就四点：

1. 鼠标移入移除事件，元素显示或者隐藏
2. 对底部小圆点的点击事件，点那个小圆点，让当前小圆点高亮，并且让对应的图片展示
3. 对左右按钮点击事件，通过点击让图片所在的元素移动一定的距离，实现切换下一张
4. 自动轮播，其实就是使用代码模拟手点击右侧按钮的事件

 <script>
        // 1.获取元素
        var focus = document.querySelector('.focus');
        var ul = document.querySelector('ul');
        var ol = document.querySelector('ol');
        var btnleft = document.querySelector('.btnleft');
        var btnright = document.querySelector('.btnright');
        var focusWidth = focus.offsetWidth;
        //2.鼠标移入事件，让左右按钮显示还是隐藏
        focus.onmouseover = function () {
            btnleft.style.display = 'block';
            btnright.style.display = 'block';
            //7.1,鼠标移入停止自动轮播
            clearInterval(timer)
        }
        focus.onmouseout = function () {
            btnleft.style.display = 'none';
            btnright.style.display = 'none';
            //7.2鼠标移开，继续开始轮播
            timer = setInterval(() => {
                btnright.click()
            }, 2000)
        }
        //3.动态生成底部li
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            //3.1顺便给每个li绑定点击事件，点谁谁高亮（排他思想）
            li.setAttribute('data-index', i)
            li.onclick = function () {

                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = ''
                }
                this.className = 'active'

                //3.3点击第几个小圆点就切换到第几张图片(比如现在点击第二个小圆点，图片展示第二张，也就是ol向左边移动focus*2的距离)
                //移动的距离 = focus宽度*点击小圆点的索引
                var index = this.getAttribute('data-index');
                // 9.如果点击小圆点，会滚动到相应 的位置，但再次点击右侧按钮或者左侧，就会出现num从0+1，而不是从小圆点的索引开始下一张
                num = index
                var move = -focusWidth * index
                console.log(move);
                animate(ul, move)

            }
            ol.appendChild(li);
        }
        //3.2默认让第一个小圆点展示高亮
        ol.children[0].className = 'active';
        //5.为了实现无缝滚动，就在最后一张添加第一张图片
        var cloneLi = ul.children[0].cloneNode(true);
        ul.appendChild(cloneLi)
        //8.左右按钮疯狂点击，轮播的速度就很快，可以使用节流阀，当点击第一张后，只有动画结束才能点击第二张，否则点击时无效的
        var flag = true;
        //4.实现点击右侧按钮的点击事件
        var num = 0
        btnright.onclick = function () {
            if (flag) {
                flag = false;
                //4.1点击一次就走focus宽度，点击两次就走focus*点击次数的距离,同时让点击次数+1;
                // 4.2到最后一张图片的时候就需要切换的第一张图片,并且不需要滚动，直接让left值变为0
                if (num == ul.children.length - 1) {
                    num = 0;
                    ul.style.left = 0
                }
                num++
                //4.3图片变化，底部的小圆点也应该变化，当点击一次，小圆点+1，当小圆点到最后一个的时候，应该让小圆点从0开始
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = ''
                }
                if (num == ol.children.length) {
                    ol.children[0].className = 'active'
                } else {
                    ol.children[num].className = 'active'
                }
                var move = -focusWidth * num
                animate(ul, move, function () {
                    //轮播动画走完了
                    flag = true
                })
            }
        }
        //6.左侧按钮实现和右侧一样，只不过判断边界条件不同
        btnleft.onclick = function () {
            if (flag) {
                flag = false;
                //4.1点击一次就走focus宽度，点击两次就走focus*点击次数的距离,同时让点击次数+1;
                // 4.2如果是第一张图片，就让图片变为最后一张图片
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * focusWidth + 'px'
                }
                num--
                //4.3图片变化，底部的小圆点也应该变化，当点击一次，小圆点+1，当小圆点到最后一个的时候，应该让小圆点从0开始
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = ''
                }
                if (num == ol.children.length) {
                    ol.children[0].className = 'active'
                } else {
                    ol.children[num].className = 'active'
                }
                var move = -focusWidth * num
                animate(ul, move, function () {
                    flag = true
                })
            }
        }
        //7.实现自动轮播
        var timer = setInterval(() => {
            btnright.click()
        }, 2000)
        //0：实现一个动画函数
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var temp = (target - obj.offsetLeft) / 10;
                temp = temp > 0 ? Math.ceil(temp) : Math.floor(temp);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    callback && callback()
                }
                obj.style.left = obj.offsetLeft + temp + 'px'
            }, 30)
        }

    </script>

效果图片展示