JS点击事件---点击切换图片

一、先上主图二、源码<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-w

念言-ny

7034人浏览 · 2021-08-22 14:29:19

念言-ny · 2021-08-22 14:29:19 发布

一、先上主图

在这里插入图片描述

二、源码

<!DOCTYPE html>
<html lang="zh">
<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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       .z_img{
            overflow: hidden;
            position: absolute;
            width: 960px;
            height: 540px;
        }
        img{
            width: 960px;
        }
        .w_dian{
            position: absolute;
            top: 500px;
            left: 375px;
        }
        span{
            display: inline-block;
            width: 27px;
            height: 27px;
            line-height: 27px;
            text-align: center;
            border-radius: 50%;
            border: 2px solid rgba(245, 207,207,0.47);
            margin-left: 10px;
            cursor: pointer;
            
        }
    </style>
</head>
<body>
    <div class="z_img">
        <img src="img/1.png" alt="" id="zzj">
        <img src="img/1.png">
        <img src="img/2.png">
        <img src="img/3.png">
        <img src="img/4.png">
    </div>
    <div class="w_dian">
    <span ></span>
    <span ></span>
    <span ></span>
    <span ></span>
    </div>
    <script>
        var span = document.querySelectorAll('span');
        // console.log(span);   //观察用
        for (let i = 0;i<span.length;i++){
            span[0].style.backgroundColor = 'rgba(255, 255,255)';
            //目的是进入页面就是显示第一种图
            span[i].onclick = function(){
                for (let i = 0;i<span.length;i++){
                    span[i].style.backgroundColor =''
                //作用是每次切换点击的位置时清除所有的背景颜色---方便点击后的背景颜色的出现
                }
                span[i].style.backgroundColor = 'rgba(255, 255,255)';
                let zzj = document.getElementById('zzj');
                let img = document.querySelectorAll('img')[i+1];
                //为什么获取 i+1 张图片因为第一张图片与第二张图片一致---且两张图片不可合并
                zzj.src = img.src;
                //将点击获取的图片信息赋值给第一张图片---达到切换的效果
            }
        }
    </script>
</body>
</html>