JavaScript课程——Day13（4、无缝轮播图）

2021/5/7 22:25:25

编程Tag： javascript var li 轮播 left ul span box Day13

本文主要是介绍JavaScript课程——Day13（4、无缝轮播图），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        #box {
            width: 600px;
            height: 400px;
            overflow: hidden;
            border: 10px solid #ccc;
            margin: 50px auto;
            position: relative;
        }

        #box ul {
            width: 10000px;
            height: 400px;
            left: 0;
            top: 0;
            position: absolute;
        }

        #box ul li {
            width: 600px;
            height: 400px;
            float: left;
        }

        #box ul li img {
            width: 100%;
            height: 100%;
        }

        #box p {
            width: 100%;
            height: 20px;
            position: absolute;
            left: 0;
            bottom: 20px;
            text-align: center;
        }

        #box p span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #333;
            border-radius: 50%;
            cursor: pointer;
        }

        #box p span.active {
            background-color: red;
        }

        #box .left,
        #box .right {
            position: absolute;
            width: 45px;
            height: 100px;
            top: 150px;
            background: url('img/sprite.png') no-repeat;
        }

        #box .left {
            left: 0;
        }

        #box .right {
            right: 0;
            background-position: -45px 0;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li><img src="img/t1.png" alt=""></li>
            <li><img src="img/t2.png" alt=""></li>
            <li><img src="img/t3.png" alt=""></li>
        </ul>
        <a href="javascript:;" class="left"></a>
        <a href="javascript:;" class="right"></a>
        <p>
            <span class="active"></span>
            <span></span>
            <span></span>
        </p>
    </div>

    <script src="js/move.js"></script>
    <script>
        var box = document.getElementById('box');
        var ul = document.querySelector('ul');
        var li = ul.querySelectorAll('li');
        var left = box.querySelector('.left');
        var right = box.querySelector('.right');
        var span = box.querySelectorAll('span');
        // console.log(box,ul,li,left,right,span);

        // 无缝轮播：将第一张图赋值一份，添加到最后
        ul.appendChild(li[0].cloneNode(true));

        var imgW = li[0].clientWidth; // 一张图的宽度
        // 给ul设置宽度，一张图的宽度乘以图片数量，图片数量=li的长度
        ul.style.width = imgW * (li.length + 1) + 'px';
        var count = 0; // 当前展示的是下标为0的这张图
        var timer = null; // 设置定时器为空

        // 实现步骤：
        // 先设置定时器，2秒执行一次，通过count++的改变，使用move(change)函数，改变ul的left值，如果count大于li的长度-1，则立即把count的值改为0，重新回到第一张图

        // 一打开就执行定时器
        timer = setInterval(auto, 2000);

        // 划上box停止定时器
        box.onmouseover = function () {
            clearInterval(timer);
        }
        // 划离box重新开启
        box.onmouseout = function () {
            timer = setInterval(auto, 2000);
        }

        // right下一张
        right.onclick = auto;
        // left上一张
        left.onclick = function () {
            if (count <= 0) {
                count = li.length;
                ul.style.left = -imgW * count +'px';
            }
            count--;
            change();
        }

        // 划上分页小按钮
        for (var i = 0; i < span.length; i++) {
            // 给span第i个自定义index属性并赋值i
            span[i].index = i;
            span[i].onmouseover = function () {
                count = this.index;
                change();
            }
        }

        function auto() {
            // 无缝轮播的关键是，先判断，再加加

            // 如果count等于li的长度，也就是最后一张图的时候，count赋值为0，并且立即改变ul的left值为0，就会回到第一张图的位置
            if (count >= li.length) {
                count = 0;
                ul.style.left = 0;
            }
            count++;

            change();
        }

        function change() {
            move(ul, { left: -imgW * count });
            // 图片轮播，改变span的className，count就是第span[i]个
            for (var i = 0; i < span.length; i++) {
                // 先把span的className清空
                span[i].className = '';
            }
            // 判断count，在给span赋值
            if (count >= li.length) {
                span[0].className = 'active';
            } else {
                span[count].className = 'active';
            }

        }
    </script>
</body>

</html>

function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        // 标准浏览器
        return getComputedStyle(ele)[attr];
    } else {
        // IE8及以下
        return ele.currentStyle[attr];
    }
}

// 元素 属性 目标 回调
function move(ele, json, callback) {
    clearInterval(ele.timer); // 先清
    // 再开
    ele.timer = setInterval(function () {
        var onOff = true; // 建一个开关

        // 在for-in的里面，如果某一个属性没有到，则把开关变为假
        for (var attr in json) { // 删掉的attr和target又回来了
            var target = json[attr];

            // 当前位置
            if (attr === 'opacity') {
                var now = getStyle(ele, 'opacity') * 100;
            } else {
                var now = parseInt(getStyle(ele, attr));
            }

            var dir = (target - now) / 10; // 方向 缓冲运动
            // 如果大于0，向上取整，否则向下取整
            dir = dir > 0 ? Math.ceil(dir) : Math.floor(dir);
            now += dir; // 下次应该运动到的位置

            if ((now >= target && dir > 0) || (now <= target) && dir < 0) {
                now = target;
            }

            // 设置值
            if (attr === 'opacity') {
                ele.style.opacity = now / 100;
                ele.style.filter = 'alpha(opacity=' + now + ')';
            } else {
                ele.style[attr] = now + 'px';
            }

            if (now !== target) {
                onOff = false;
            }
        }

        if (onOff) { // 如果开关是真的，则清定时器并执行回调
            clearInterval(ele.timer);
            callback && callback();
        }
    }, 30);
}

这篇关于JavaScript课程——Day13（4、无缝轮播图）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript课程——Day13（4、无缝轮播图）

相关编程文章