js轮播图按钮小案例_轮播图加按钮-CSDN博客

本文链接：https://blog.csdn.net/dsadada23/article/details/126451989

案列介绍

我们在写网页和app的时候经常看到轮播图，通过小按钮或者左右箭头按钮操作切换图片，点击到当前的小按钮并改变它的样式，并实现切换图片，本案例是写一个切换按钮的小案例。

一、大概步骤

注意：有很多实现的方法，不一定是这一种

1、用无序标签在网页上做出几个小圆点

2、修改每个小圆圈的样式

3、js获取到每个li的元素对象

4、用循环实现点击第n个li时改变li样式

5、注意点击当前li后排除其他的li

二、代码

1.html

代码如下（示例）：

 <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
 </ul>

2.css

代码如下（示例）：

        ul {
            /* 设置ul的宽度和弹性布局 */
            width: 120px;
            display: flex;
            justify-content: space-evenly;
        }

        li {
            /* 设置每个li的为圆形和默认背景颜色 */
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ccc;
        }

        /* 点击后的北京颜色 */
        .clickli {
            background-color: red;
        }

        /*默认背景颜色 */
        .libg {
            background-color: #ccc;
        }

3.js

核心代码如下（示例）：

提示：获取元素的方法还有很多比如 document.querySelectorAll('li')写在注释里了。在js修改元素的样式方法也有多种，在注释里。

//方法：巧用this，单击当前元素时改变
    //用getElementsByTagName获取到所有li元素对象(集合)获取到的是HTMLcollection对象
    var lis = document.getElementsByTagName('li');
    // console.log(lis);
    //利用循环完成点击下标为n时改变第n个元素的背景颜色。
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            //先给所有的li都设置为原来的颜色，要写this前面
            for (var j = 0; j < lis.length; j++) {
                // lis[j].style.backgroundColor = '#ccc';
                lis[j].className = 'libg'
            }
            //this指向当前点击的i,索引号为i，点击时改变当前li的背景颜色
            // this.style.backgroundColor = 'red';
            this.className = 'clickli'
        }
    }

不排除其他li的元素时会是这样的

修改之后

全部代码

<!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>
        ul {
            /* 设置ul的宽度和弹性布局 */
            width: 120px;
            display: flex;
            justify-content: space-evenly;
        }
        li {
            /* 设置每个li的为圆形和默认背景颜色 */
            list-style: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ccc;
        }
        /* 点击后的北京颜色 */
        .clickli {
            background-color: red;
        }

        /*默认背景颜色 */
        .libg {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    //方法：巧用this，单击当前元素时改变
    //用getElementsByTagName获取到所有li元素对象(集合)获取到的是HTMLcollection对象
    var lis = document.getElementsByTagName('li');
    // 用querySelectorAll获取所有li元素对象，获取到的是NoteList对象
    // var lis=document.querySelectorAll('li');
    // console.log(lis);
    //利用循环完成点击下标为n时改变第n个元素的背景颜色。
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            //先给所有的li都设置为原来的颜色，要写this前面
            for (var j = 0; j < lis.length; j++) {
                // lis[j].style.backgroundColor = '#ccc';
                lis[j].className = 'libg'
            }
            //this指向当前点击的i,索引号为i，点击时改变当前li的背景颜色
            // this.style.backgroundColor = 'red';
            this.className = 'clickli'
        }
    }
</script>
</html>