js点击小图完成大图切换

最新推荐文章于 2022-03-30 07:03:22 发布

原创最新推荐文章于 2022-03-30 07:03:22 发布 · 3.8k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5 #javascript

本文介绍了如何使用JavaScript实现一个美女画廊的效果，通过遍历小图并绑定单击事件，当用户点击小图时，大图src和下方标题会实时更新显示对应美女的图片和标题信息。

思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的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>