网页轮播图部分

爱好是吃的蓝胖

已于 2022-06-01 12:15:02 修改

阅读量136

点赞数

分类专栏：练习

于 2022-06-01 10:08:53 首次发布

本文链接：https://blog.csdn.net/m0_61044901/article/details/125078155

版权

HTML5 JavaScript 轮播图图片切换交互设计

关键词由CSDN通过智能技术生成

练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

功能需求：

1）鼠标经过轮播模块，左右按钮显示，离开时隐藏左右按钮

2）点击右侧按钮一次，图片往左播放一张，以此类推

点击左侧按钮一次，图片往右播放一张，以此类推

3）图片播放的同时，下面的小矩形模块跟随一起变化

4）点击小矩形，可以播放响应的图片

5）鼠标不经过轮播图，轮播图自动播放

6）鼠标经过轮播图，自动播放停止

<!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>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="w">
        <div class="main">
            <div class="focus">
                <img src="./img/pre.svg" class="pre">
                <img src="./img/next.svg" class="next">

                <ul>
                    <li>
                        <img src="./img/1.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/2.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/3.jpg" alt="">
                    </li>
                    <li>
                        <img src="./img/4.jpg" alt="">
                    </li>

                </ul>

                <ol class="rectangle">

                </ol>
            </div>
        </div>
    </div>
</body>
<script src="./js/animate.js"></script>

<script src="./js/index.js"></script>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.focus {
    position: relative;
    width: 800px;
    height: 500px;
    background-color: red;
    overflow: hidden;
}

.focus ul {
    width: 550%;
    position: absolute;
    top: 0;
    left: 0;
}

.focus ul li {
    float: left;
}

ul li img {
    width: 800px;
    height: 500px;
    list-style: none;
}

.rectangle {
    display: flex;
    position: absolute;
    list-style: none;
    margin-top: 60%;
    ;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.rectangle li {
    position: relative;
    width: 60px;
    height: 5px;
    background-color: #4de8f3;
    margin-right: 6px;
    cursor: pointer;
}

.pre,
.next {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 40%;
    transform: translateY(50%);
    cursor: pointer;
    display: none;
    z-index: 2;
}

.pre {
    left: 30px;
}

.next {
    right: 30px;
}

function animate(obj,target,callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        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();
            }
        }

        obj.style.left = obj.offsetLeft + step + 'px';
    },15);

}

window.addEventListener('load', function() {
    //获取元素
    var preEl = document.querySelector('.pre');
    var nextEl = document.querySelector('.next');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标经过focus就显示隐藏左右的按钮
    focus.addEventListener('mouseenter', function() {
            preEl.style.display = 'block';
            nextEl.style.display = 'block';
            clearInterval(timer);
            timer = null;
        })
        //鼠标离开focus就隐藏左右的按钮
    focus.addEventListener('mouseleave', function() {
        preEl.style.display = 'none';
        nextEl.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            nextEl.click();
        }, 2000)

    })

    //动态生成小矩形，有几张图片，生成几个小矩形
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.rectangle');
    // console.log(ul.children.length);
    for (var i = 0; i < ul.children.length; i++) {
        //创建一个小li
        var li = document.createElement('li');

        //记录当前下标 通过自定义属性来做
        li.setAttribute('index', i);

        //把小li插入ol里
        ol.appendChild(li);
        //小圆圈的排它思想 直接在生产的小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function() {
            //把所有li清除current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }

            //当前li设置current类名
            this.className = 'current';

            //点击矩形，移动图片，移动ul
            //ul的距离  矩形的下标*图片的宽度，注意是负值
            //当点击某个li时 就拿到li的下标
            var index = this.getAttribute('index');
            //点击某个li，就把li的下标给num
            num = index;
            //点击某个li，就把li的下标给rectangle
            rectangle = index;

            console.log(focusWidth);
            console.log(index);
            animate(ul, -index * focusWidth);
        })
    }
    //把ol里面的第一个li设置类名current
    ol.children[0].className = 'current';

    //克隆第一张图片(li)，放在ul最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);

    //点击右侧按钮 图片滚动一张
    var num = 0;
    //控制矩形的播放 rectangle
    var rectangle = 0;

    preEl.addEventListener('click', function() {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';

        }
        num--;
        animate(ul, -num * focusWidth)

        //点击右侧按钮 矩形跟随一起变化
        rectangle--;
        if (rectangle < 0) {
            rectangle = ol.children.length - 1;
        }

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



    //点击左侧按钮 图片滚动一张
    nextEl.addEventListener('click', function() {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth)

        //点击右侧按钮 矩形跟随一起变化
        rectangle++;
        if (rectangle == ol.children.length) {
            rectangle = 0;
        }

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

    //自动轮播图
    var timer = setInterval(function() {
        //手动调用点击事件
        nextEl.click();
    }, 2000)


})