HTML5滑动轮播图实现-优快云博客

本文链接：https://blog.youkuaiyun.com/dimingda/article/details/121844941
提供一个筋斗云特效
在这里插入图片描述
移动时，背景变为筋斗云，鼠标离开回到起始位置，可以点击更改其实位置。
代码如下`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .focus {
            position: relative;
            width: 721px;
            height: 455px;
            background-color: beige;
            margin: auto;
            overflow: hidden;
        }
        .focus ul li {
            list-style: none;
            float: left; 
        }
        .focus ul {
            padding: 0;
            width: 1400%;
            margin: 0;
            position: absolute;
            top: 0px;
            left: 0;
        }
        .arr1, .arr2 {
            display: none;
            position: absolute;
            text-decoration: none;
            margin-top: -24px;
            top: 50%;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-family: 'icomoon';
            font-size: 18px;
            z-index: 99;

        }
        .arr2 {
            right: 0;
        }
        ol li {
            float: left;
            width: 8px;
            height: 8px;
            list-style: none;
            width: 6px;
            height: 6px;
            background-color: rgba(0, 0,0, .4);
            border: 2px solid rgba(0, 0,0, .3);
            border-radius: 50%;
            float: left;
            margin: 0 4px;
            cursor: pointer;
        }
        .current {
            background-color: #fff;      
        }
        ol {
            position: absolute;
            bottom: 5px;
            left: 50%;

        }
    </style>
</head>
<body>
    <div class="focus">
        <a href="javaScript:;" class="arr1"><</a>
        <a href="javaScript:;" class="arr2">></a>
        <ul>
            <li>
                <a href="#"><img src="../image/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../image/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../image/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="../image/focus3.jpg" alt=""></a>
            </li>
        </ul>
        <ol></ol>
    </div>
    <script>
        // 轮播图用ul实现
        var arr1 = document.querySelector('.arr1');
        var arr2 = document.querySelector('.arr2');
        var focus1 = document.querySelector('.focus');
        var ul = focus1.querySelector('ul');
        var ol = focus1.querySelector('ol');
        var focuswidth = focus1.offsetWidth;
        var circle = 0;
        var circle1 = 4;
        function animate(obj, target, callback) {
             // console.log(callback);  callback = function() {}  调用的时候 callback()

            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                    // 回调函数写到定时器结束里面
                    // if (callback) {
                    //     // 调用函数
                    //     callback();
                    // }
                    callback && callback();
                }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        focus1.addEventListener('mouseenter', function() {
            arr1.style.display = 'block';
            arr2.style.display = 'block';
        })
        focus1.addEventListener('mouseleave', function() {
            arr1.style.display = 'none';
            arr2.style.display = 'none';
        })
        for(var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            li.setAttribute('index', i)
            ol.appendChild(li);
            li.addEventListener('click', function() {
                for(var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                num = num1 = index;
                circle = circle1 = index;                
                animate(ul, -index * focuswidth);

            })
        }
        ol.children[0].className = 'current';
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        var num = 0;
        arr2.addEventListener('click', function() {
            if(num == 4) {
                ul.style.left = 4 * focuswidth + 'px';
                num = 0;
            }
            num++;
            animate(ul, -num * focuswidth);
            circle++;
            if(circle == 4) {
                circle = 0;
            }
            for(var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        })
        var num1 = 4;
        arr1.addEventListener('click', function() {
            if(num1 == 0) {
                ul.style.left = 0;
                num1 = 4;
            }
            num1--;
            animate(ul, -num1 * focuswidth);
            circle1--;
            if(circle1 == -1) {
                circle1 = 3;
            }
            for(var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle1].className = 'current';
        })
        var timer1 = setInterval(function() {
            arr2.click();
        }, 2000)
    </script>
</body>
</html>
常见的筋斗云特效
