js点击小图完成大图切换

最新推荐文章于 2024-10-13 20:55:11 发布

YanLingGe

最新推荐文章于 2024-10-13 20:55:11 发布

阅读量3.6k

点赞数 2

本文链接：https://blog.csdn.net/YanLingGe/article/details/121571834

版权

思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。

步骤：

1、页面的搭建

2、获取元素

3、遍历伪数组

4、给四个小美女绑定单击事件

5、把事件源的src属性值赋给大图的src属性值

6、把事件源的title属性值赋给标题的innerText属性值

重要步骤：

// 获取小图

var smallPic = document.getElementById("smallPicObj").getElementsByTagName("img");

// 获取大图

var bigPic = document.getElementById("bigPic");

具体代码:

<style>
        div img{
            width: 150px;
        }
        img{
            width: 600px;
        }
</style>

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

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