JS实现轮播图点击切换、按钮切换功能

JS实现轮播图点击切换、按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典，写法也非常多，我在写一个自己用的比较多的写法，帮助大家理解，在网页的设计中，可以直接拿去用（记得换图片路径哦！），仅供参考学习。轮播图案例代码如下（示例）：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"&gt

前端菜菜阿海

15819人浏览 · 2021-07-13 17:33:09

前端菜菜阿海 · 2021-07-13 17:33:09 发布

JS实现轮播图点击切换、按钮切换功能

前言
轮播图案例
总结

前言

轮播图的案例非常经典，写法也非常多，我在写一个自己用的比较多的写法，帮助大家理解，在网页的设计中，可以直接拿去用（记得换图片路径哦！），仅供参考学习。

轮播图案例

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #slideshow {
            width: 800px;
            height: 600px;
            overflow: hidden;
            position: relative;
            margin: 50px auto;
        }

        #pre {
            position: absolute;
            top: 250px;
            left: 368px;
            width: 50px;
            height: 100px;
            font-size: 40px;
            opacity: 0.5;
            cursor: pointer;
        }

        #next {
            position: absolute;
            top: 250px;
            left: 1118px;
            width: 50px;
            height: 100px;
            font-size: 40px;
            opacity: 0.5;
            cursor: pointer;
        }

        #imglist li {
            position: absolute;
            opacity: 0;
        }

        #dotlist {
            position: absolute;
            bottom: 30px;
            width: 100px;
            display: flex;
            justify-content: space-between;
            left: 50%;
            transform: translate(-50%);
        }

        #dotlist > li {
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 50%;
            background-color: rgb(206, 16, 16);
            opacity: 0.3;
            cursor: pointer;
            user-select: none;
        }

        #imglist > li.appear,
        #dotlist > li.appear {
            opacity: 1;
        }


    </style>
</head>

<body>

<div id="slideshow">
    <ul id="imglist">
        <li><img src="1.gif" alt=""></li>
        <li><img src="2.gif" alt=""></li>
        <li><img src="3.gif" alt=""></li>
        <li><img src="4.gif" alt=""></li>
        <li><img src="5.gif" alt=""></li>
    </ul>
    <ul id="dotlist">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<button id="pre"><</button>
<button id="next">></button>
<script>
    //获取元素
    var slideShow = document.getElementById("slideshow");
    var imgList = document.getElementById("imglist");
    var imgs = imgList.children;
    var dotList = document.getElementById("dotlist");
    var dots = dotList.children;
    var pre = document.getElementById("pre");
    var next = document.getElementById("next");
    var duration = 2000;
    var Index = 0;
    var count = imgList.children.length;
    var timer;

    window.onload = function () {
        imgList.children[0].classList.add("appear");
        dotList.children[0].classList.add("appear");

        for (var i = 0; i < dots.length; i++) {
            dots[i].index = i;
            dots[i].onclick = changeMe;
        }

        timer = setInterval(rotate, duration);

        slideShow.onmouseover = function (event) {
            clearInterval(timer);
        };

        slideShow.onmouseout = function (event) {
            timer = setInterval(rotate, duration);
        };

        pre.onclick = preImg;
        next.onclick = nextImg;
    }

    function change() {
        for (var i = 0; i < dots.length; i++) {
            dots[i].classList.remove("appear");
            imgs[i].classList.remove("appear");
        }
        dots[Index].classList.add("appear");
        imgs[Index].classList.add("appear");
    }

    //循环切换图片
    function rotate() {
        Index++;
        if (Index == count) {
            Index = 0;
        }
        change();
    }

    function preImg() {
        Index--;
        if (Index < 0) {
            Index = count - 1;
        }
        change();
    }

    function nextImg() {
        Index++;
        if (Index == count) {
            Index = 0;
        }
        change();
    }

    function changeMe() {
        Index = this.index;
        change();
    }
</script>
</body>
</html>