切换图片（圆点）

最新推荐文章于 2023-08-21 13:55:36 发布

吴机智

最新推荐文章于 2023-08-21 13:55:36 发布

阅读量243

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108474747

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 400px;
            height: 300px;
            border: 5px solid #000;
            margin: 20px auto;
            text-align: center;
            line-height: 25px;
        }

        p {
            background: rgba(255, 255, 0, 0.5);
        }

        img {
            width: 400px;
            height: 250px;
            display: block;
        }

        ul {
            display: flex;
            justify-content: center;
        }

        li {
            width: 20px;
            height: 25px;
            text-align: center;
            display: inline-block;
            background: red;
            margin: 0 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <p>动漫1</p>
        <img src="./img/11.jpg" alt="">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script>
        // 效果描述: 点击每一个li, 切换图片, 切换p标签的内容
        // 数组里面保对象的方式存储一一对应的多个数据
        // 对象中： 名字  和 图片地址    属性名: 属性值
        var arr = [
            {
                'name': '动漫1',
                'src': './img/11.jpg'
            }, {
                'name': '动漫2',
                'src': './img/22.jpg'
            }, {
                'name': '动漫3',
                'src': './img/33.jpg'
            }, {
                'name': '动漫4',
                'src': './img/44.jpg'
            }
        ];
        console.log(arr);
        var lis = document.getElementsByTagName('li');
        var p = document.getElementsByTagName('p')[0];
        var img = document.getElementsByTagName('img')[0];
        console.log(lis);
        // 数据与li一一对应, 索引相同
        for (var i = 0; i < lis.length; i++) {
            // 自定义索引
            lis[i].index = i;
            // 添加点击事件
            lis[i].onclick = function(){
                // 获取数据--->需要索引
                console.log(this.index);
                console.log(arr[this.index]);
                console.log(arr[this.index].name, arr[this.index].src);
                // 更新页面  赋值地址和名字
                img.src = arr[this.index].src;
                p.innerHTML = arr[this.index].name;
            }
        }
    </script>
</body>

</html>