轮播图特效实现-优快云博客

<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0;
            list-style: none
        }
        
        .all {
            width: 600px;
            height: 400px;
            padding: 6px;
            margin: 200px auto;
            position: relative;
            border: 1px solid #ccc;
        }
        
        .screen {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }
        
        .screen li {
            width: 600px;
            height: 400px;
            overflow: hidden;
            float: left;
        }
        
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3600px;
        }
        
        .all ol {
            position: absolute;
            text-align: center;
            right: 10px;
            bottom: 10px;
            line-height: 30px;
        }
        
        .all ol li {
            float: left;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border: 1px solid #ccc;
            margin-left: 15px;
            cursor: pointer;
        }
        
        .all ol li.current {
            background-color: pink;
        }
        
        #arr {
            display: none;
            z-index: 1000;
        }
        
        #arr span {
            width: 50px;
            height: 50px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -25px;
            background: #000;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #ccc;
        }
        
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>

<body>
    <div class='all' id="box">
        <div class="screen">
            <ul>
                <li><img src="images/wf1.jpg" width='600' height='400'></li>
                <li><img src="images/wf2.jpg" width='600' height='400'></li>
                <li><img src="images/wf3.jpg" width='600' height='400'></li>
                <li><img src="images/wf4.jpg" width='600' height='400'></li>
                <li><img src="images/wf5.jpg" width='600' height='400'></li>
            </ul>
            <ol></ol>
        </div>
        <div id="arr"><span id='left'>&lt;</span><span id='right'>&gt;</span></div>
    </div>
    <script>
        //获取元素
        var box = document.getElementById('box');
        var screen = box.children[0];
        var ul = screen.children[0];
        var ol = screen.children[1];

        //箭头 arrow
        var arr = document.getElementById('arr');
        var arrLeft = document.getElementById('left');
        var arrRight = document.getElementById('right')
            //图片的宽度
        var imgWidth = screen.offsetWidth;

        //1.动态生成序号
        var count = ul.children.length;

        for (var i = 0; i < count; i++) {
            var li = document.createElement('li');

            ol.appendChild(li);
            setInnerText(li, i + 1);
            //2.点击序号，动画的方式切换图片
            li.onclick = liClick;
            //让当前Li记录他的索引，设置标签的自定义属性
            li.setAttribute('index', i)
        }

        function liClick() {
            //2.1取消其他li的高亮显示，让当前li高亮显示
            for (var i = 0; i < ol.children.length; i++) {
                var li = ol.children[i];
                li.className = '';
            }
            //当前li高亮显示
            this.className = 'current';
            //2.2点击序号，动画的方式切换到当前点击图片的位置
            var liIndex = parseInt(this.getAttribute('index'));
            animate(ul, -liIndex * imgWidth)
                //全局变量index和li中的index保持一致
        }
        //让序号1高亮显示
        ol.children[0].className = 'current';


        //3.鼠标放在盒子上显示箭头
        box.onmouseenter = function() {
            arr.style.display = 'block';

        }
        box.onmouseleave = function() {
                arr.style.display = 'none';
            }
            //4.无缝连接
            //下一张
        var index = 0; //第一张图片的索引
        arrRight.onclick = function() {
            // 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
            if (index === count) {
                ul.style.left = '0px';
                index = 0;
            }
            index++;
            if (index < count) {
                ol.children[index].click()
            } else {
                //如果是最后一张图片，以动画的方式，移动到克隆的抵账图片
                animate(ul, -index * imgWidth);
                // 取消所有序号的高亮显示，让第一序号高亮显示
                for (var i = 0; i < ol.children.length; i++) {
                    var li = ol.children[i];
                    li.className = '';
                }
                ol.children[0].className = 'current';
            }
        }

        //上一张
        arrLeft.onclick = function() {
            //如果当前是第一张图片，此时要偷偷的切换到最后一张图片的位置（克隆的第一张图片）
            if (index === 0) {
                index = count;
                ul.style.left = -index * imgWidth + 'px';
            }
            index--;
            ol.children[index].click()
        }

        var firstLi = ul.children[0];
        // 克隆li  cloneNode()  复制节点  
        // 参数  true  复制节点中的内容
        // false  只复制当前节点，不复制里面的内容
        var cloneLi = firstLi.cloneNode(true);
        ul.appendChild(cloneLi)

        //封装动画函数
        function animate(element, target) {
            //通过判断，保证页面上只有一个定时器在执行动画
            if (element.timeId) {
                clearInterval(element.timeId);
                element.timeId = null;
            }
            element.timeId = setInterval(function() {
                //步进，每次移动的距离
                var step = 10;
                //盒子当前的位置
                var current = element.offsetLeft;
                //判断如果当前位置>目标位置 此时的step要小于0
                if (current > target) {
                    step = -Math.abs(step);
                }
                if (Math.abs(current - target) <= Math.abs(step)) {
                    //让定时器停止
                    clearInterval(element.timeId);
                    //让盒子到target的位置
                    element.style.left = target + 'px';
                    return;
                }
                //移动盒子
                current += step;
                element.style.left = current + 'px'
            }, 10)
        }

        // 处理innerText和textContent的兼容性问题
        // 设置标签之间的内容
        function setInnerText(element, content) {
            // 判断当前浏览器是否支持 innerText
            if (typeof element.innerText === 'string') {
                element.innerText = content;
            } else {
                element.textContent = content;
            }
        }
    </script>
</body>

</html>