JS实现隔行换色/美女画廊

最新推荐文章于 2024-04-14 08:44:26 发布

栗同学

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量500

点赞数

分类专栏：案例文章标签： html 编辑器 vscode

本文链接：https://blog.csdn.net/lizixuan2001/article/details/121566047

版权

案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>隔行换色</title>
</head>
<body>
    <button>点我换色</button>
    <ul>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
        <li>1111111111111111111</li>
    </ul>
</body>
</html>
<script>
    //1.获取按钮dom对象
    //2.绑定点击事件
    //3.处理li 判断奇偶
    //4.奇数设置颜色 偶数设置颜色
    document.getElementsByTagName("button")[0].onclick = function(){
        var list = document.querySelectorAll("li")
        for(var i = 0;i<list.length;i++){
            if(i % 2 == 0){
                list[i].style.color = "deepskyblue"
            }else{
                list[i].style.color = "crimson"
            }
        }
    }
</script>

<!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>美女画廊</title>
    <style>
        div img{
            width: 150px;
        }
        img{
            width: 600px;
        }
    </style>
</head>
<body>
    <h2>美女画廊</h2>
    <div>
        <img class="smallImg" src="./img/1.jpg" alt="" title="美女A">
        <img class="smallImg" src="./img/2.jpg" alt="" title="美女B">
        <img class="smallImg" src="./img/3.jpg" alt="" title="美女C">
        <img class="smallImg" src="./img/4.jpg" alt="" title="美女D">
    </div>
    <img class="bottomImg" src="./img/1.jpg" alt="" title="美女A">
    <h3>美女A</h3>
</body>
</html>
<script>
    //获取dom 添加点击事件
    //处理程序：点击时把下面的img的src属性设置为上面的图片src

    var list = document.getElementsByClassName("smallImg")
    for(var i = 0;i<list.length;i++){
        list[i].onclick = function(){
            document.getElementsByClassName("bottomImg")[0].src=this.src
            document.querySelector("h3").innerHTML = this.title
        }
    }
</script>