点击左右按钮，小圆点切换图片

 <div>
        <button>&lt;</button>
        <button class="right">&gt;</button>
        <h2 id="cont">1/4</h2>
        <img src="./img/1.jpg" alt="" id="pic">
        <ul>
            <li class="item"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <h2 id="foot">one</h2>
    </div>

小圆点的特殊样式

 .item{
            background: lightgreen;
        }

js部分
获取元素
使用数组添加图片及图片信息

  var cont = document.getElementById('cont');
        var foot = document.getElementById('foot');
        var pic = document.getElementById('pic');
        var oli = document.getElementsByTagName('li');
        var btn = document.getElementsByTagName('button');
        var arr = [
            {
                picSrc:'./img/1.jpg',
                picCont : '1/4',
                picFoot:'one'
            },
            {
                picSrc:'./img/2.jpg',
                picCont : '2/4',
                picFoot:'two'
            },
            {
                picSrc:'./img/3.jpg',
                picCont : '3/4',
                picFoot:'three'
            },
            {
                picSrc:'./img/4.jpg',
                picCont : '4/4',
                picFoot:'four'
            }
          
        ];
        var count = 0; //记录点击次数

左边按钮

 //左边按钮
            btn[0].onclick = function () {
                count--;
                if(count<0){
                    // 图片到达第一张，使图片继续往后，即到达最后一张
                    count = arr.length-1;
                }
                for (var j =0; j<oli.length ; j++){//遍历小圆点
                    oli[j].className = '';    //初始化小圆点样式
                }
                 //将点击的次数作为小圆点的下标，改变小圆点的特殊样式
                oli[count].className = 'item'; 
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
                
            }

右边按钮

 //右边按钮
            btn[1].onclick = function () {
                count++;
                if(count>arr.length-1){  
                    //如果点击的次数大于已有的图片数（到达最后一张图片），将count重新归0，即回到第一张
                    count = 0;
                }
                for (var j =0; j<oli.length ; j++){  //遍历小圆点
                    oli[j].className = '';   //初始化小圆点样式
                }
                oli[count].className = 'item';
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
            }

点击小圆点

 //点击小圆点
            for (var i = 0 ;i<oli.length; i++){
                oli[i].index = i;
                oli[i].onclick = function () {
                    //关键
                    count = this.index;
                    for (var j =0; j<oli.length ; j++){//遍历小圆点
                    oli[j].className = '';    //初始化小圆点样式
                }
                //将点击的次数作为小圆点的下标，改变小圆点的特殊样式
                oli[count].className = 'item';  
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
                }
            }

自动轮播

    setInterval(function () {
                console.log(oli.length);
                count++;
                if (count > oli.length-1 ) {
                    count = 0;
                }
                change();
            }, 1000)

效果

由于代码重复很多，可以使用函数封装

 //封装函数
            }
            function change(){
                for (var j =0; j<oli.length ; j++){
                    oli[j].className = '';  
                }
                oli[count].className = 'item'; 
                pic.src = arr[count].picSrc;
                cont.innerHTML = arr[count].picCont;
                foot.innerHTML = arr[count].picFoot;
            }

使用时调用即可

具体实现步骤：

        2.1 点击右箭头 让图片依次往后进行切换  如果切换到最后一张 回到第一张 1--2--3--4--1

                        2.1.1 获取元素 按钮 p img

                        2.1.2 添加事件 加给按钮

                        2.1.3 图片切换到下一张

                        2.1.4 不知道是第几张图 假设 n = 1  

                        2.1.5 更新img的地址 img.src = '';

                        2.1.6 图片+1 之后 判断是不是已经是最后一张 如果n == 5  n = 1

        2.2 点击左箭头 让图片依次往前切换 如果是第一张 回到最后一张 1--4--3--2--1

                        2.2.1 获取元素 按钮 p img

                        2.2.2 添加事件 加给按钮

                        2.2.3 图片切换到上一张

                        2.2.4 通过 n 获取当前是第几张图片  

                        2.2.5 更新img的地址 img.src = '';

                        2.2.6 图片-1 之后 判断是不是已经是第一张 如果n == 0  n = 4

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            position: relative;
            width: 700px;
            height: 400px;
            margin: 10px auto;
        }

        .wrap p {
            color: #fff;
            text-align: center;
            line-height: 20px;
            background-color: #000;
        }

        .wrap img {
            vertical-align: middle;
            width: 100%;
            height: 360px;
        }

        .wrap button {
            width: 30px;
            height: 30px;
            font-size: 20px;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            text-align: center;
            line-height: 30px;
            outline: none;
            position: absolute;
            top: 50%;
            margin-top: -15px;
        }

        .btn1 {
            right: 0;
        }

        .btn2 {
            left: 0;
        }
    </style>

 <div class="wrap">
        <p>1/4</p>
        <img src="./img1.jpg" alt="">
        <p>动漫1</p>
        <button class="btn1">&gt;</button>
        <button class="btn2">&lt;</button>

    </div>

 <script>
        //1、获取元素 按钮 p img
        var img = document.getElementsByTagName('img')[0];
        var btns = document.getElementsByTagName('button');
        var ps = document.getElementsByTagName('p');
        console.log(btns, img, ps);
        //4、不知道照片处于第几张 假设一个变量存初始值
        var n = 1;
        //2、添加事件 加给按钮 btns
        btns[0].onclick = function () {
            //3、写具体代码操作  
            n++;
            console.log(n);
            if (n == 5) {
                n = 1
            }
            //5、图片切换到下一张
            img.src = './img' + n + '.jpg'
            //获取p标签内容
            //设置p标签内容里面的数字
            ps[0].innerHTML = n + '/4';
            ps[1].innerHTML = '动漫' + n;

        }
        btns[1].onclick = function () {
            //3、写具体代码操作  图片切换到下一张
            n--;
            console.log(n);
            if (n == 0) {
                n = 4
            }
            //5、切换图片
            img.src = './img' + n + '.jpg'
            //获取p标签内容
            //设置p标签内容里面的数字
            ps[0].innerHTML = '' + n + '/4';
            ps[1].innerHTML = '动漫' + n;
        }
    </script>

效果：

前言

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

轮播图案例

代码如下（示例）：

<!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>

效果图如下：

总结

里面的一些事件操作，我在前面的文章基本都讲到了，遇到不明白的可以翻翻我以前写的事件操作，也欢迎大家留言、私信我，我会尽力帮大家解决问题。

如果文章对你有帮助的话，请给我一个小小的点赞一波哦！每个赞和评论都是我编写文章的动力哦！