幻灯片轮播图（含自动播放和手动点击播放，代码易懂）

最新推荐文章于 2024-05-13 15:54:57 发布

雨沫成晴

最新推荐文章于 2024-05-13 15:54:57 发布

阅读量1k

点赞数 3

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_45744775/article/details/124728690

版权

HTML代码：

<!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>幻灯片轮播图</title>
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./Micss/Lunbo.css">
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./Micss/reset.css">
    <!-- 引入js文件 -->
    <script src="./js/Lu.js"></script>
</head>

<body>
    <!-- 轮播图容器 -->
    <div class="slideshow">
        <ul class="mySlides clearfix">
            <li class="sideItem slideActive fade">
                <a href="javascript:;">
                    <img src="./img/img.jpg">
                </a>
            </li>
            <li class="sideItem fade">
                <a href="javascript:;">
                    <img src="./img/img2.jpg">
                </a>
            </li>
            <li class="sideItem fade">
                <a href="javascript:;">
                    <img src="./img/img3.jpg">
                </a>
            </li>
        </ul>
        <div class="prev">❮</div>
        <div class="next">❯</div>
        <nav class="navHover">
            <ul>
                <li class="dot dotActive"></li>
                <li class="dot"></li>
                <li class="dot"></li>
            </ul>
        </nav>
    </div>
</body>

</html>

CSS代码（Lunbo.css):

* {
    box-sizing: border-box
}

body {
    font-family: Verdana, sans-serif;
}


.sideItem {
    position: absolute;
}

.slideActive {
    z-index: 99;
    display: block;
}

/* 幻灯片容器 */
.slideshow {
    max-width: 1000px;
    position: relative;
    margin: 100px auto;
}

/* 下一张 & 上一张 按钮 */
.prev,
.next {
    z-index: 100;
    cursor: pointer;
    position: absolute;
    margin-top: 138px;

    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

/* 定位 "下一张" 按钮靠右 */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* 上一张和下一张的鼠标移上效果 */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* 导航元素所在的nav设置 */
.navHover {
    position: absolute;
    z-index: 100;
    right: 455px;
    bottom: -340px;
}

/* 导航圆点设置 */
.dot {
    width: 13px;
    height: 13px;
    border: 2px solid rgb(187, 187, 187);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    float: left;
    margin: 0 4px;
    cursor: pointer;
    right: 0;
}

/* 导航圆点鼠标移上显示设置 */
.dot:hover {
    border: 2px solid rgba(0, 0, 0, .4);
    background-color: rgb(187, 187, 187);
}

.dotActive {
    border: 2px solid rgba(0, 0, 0, .4);
    background-color: rgb(187, 187, 187);
}

/* 淡出动画 */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

JavaScript代码（Lu.js）:

window.onload = function () {

    var slideIndex = 1;
    showSlides(slideIndex);

    let prev = document.getElementsByClassName('prev')[0];
    let next = document.getElementsByClassName('next')[0];
    let navs = document.getElementsByClassName('dot');
    // 上一张点击事件
    prev.addEventListener('click', function () {
        plusSlides(-1);
    });
    // 下一张点击事件
    next.addEventListener('click', function () {
        plusSlides(1);
    });

    for (let i = 1; i <= navs.length; i++) {
        navs[i - 1].addEventListener('click', function () {
            currentSlide(i);
        });
    }

    function currentSlide(n) {
        clearTimeout(timeout);
        showSlides(slideIndex = n);
    }

    function plusSlides(n) {
        clearTimeout(timeout);
        showSlides(slideIndex += n - 1);
    }

    function showSlides(n) {
        var i;
        let imgs = document.getElementsByClassName('sideItem');
        let navs = document.getElementsByClassName('dot');

        if (n > imgs.length) { slideIndex = 1; }
        if (n < 1) { slideIndex = imgs.length; }
        for (i = 0; i < imgs.length; i++) {
            imgs[i].classList.remove("slideActive")//移出slideActive类
        }

        for (i = 0; i < navs.length; i++) {
            navs[i].classList.remove("dotActive");
        }
        imgs[slideIndex - 1].classList.add("slideActive");//增加slideActive类
        navs[slideIndex - 1].classList.add("dotActive");//增加dotActive类
        timeout = setTimeout(showSlides, 2000); // 切换时间为 2 秒
        slideIndex++;
        if (slideIndex > imgs.length) {
            slideIndex = 1;
        }
        return timeout;
    }
}