DOM基础1之点击小图片显示对应的大图

最新推荐文章于 2021-06-24 07:04:06 发布

JunXian9102

最新推荐文章于 2021-06-24 07:04:06 发布

阅读量811

点赞数 1

文章标签： dom

本文链接：https://blog.csdn.net/smiple9102/article/details/60977878

版权

js-dom基础课堂笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

京东商品展示升级
需求：点击下面的小图片让上面的大图片显示相应的大图

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #box {
            width: 360px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        #box img {
            vertical-align: middle;
        }
        #box ul {
            overflow: hidden;
            border-top: 1px solid #ccc;
        }
        #box li {
            float: left;
        }
    </style>
</head>
<body>
<div id="box">
    <img src="images/01big.jpg" id="bigImg" alt=""/>
    <ul id="itemList">
        <li><img src="images/01.jpg" ;" alt="1"/></li>
        <li><img src="images/02.jpg" ;" alt="2"/></li>
        <li><img src="images/03.jpg" ;" alt="3"/></li>
        <li><img src="images/04.jpg" ;" alt="4"/></li>
        <li><img src="images/05.jpg" ;" alt="5"/></li>
    </ul>
</div>
<script>
//业务需求：点击下面的小图片 让上面的大图片显示相应的大图
//只需批量获取页面上ul中的img
var ul=document.getElementById('itemList');
var imgs=ul.document.getElementsByTagName('img');//获取到ul中的所有小图片
//要给所有小图片绑定事件，遍历每一个小图片
for (var i = 0; i < imgs.length; i++) {
    var img=imgs[i];//每一个小图片。
    //绑定事件 事件源.事件=function(){事件处理程序}；
    img.onclick=function(){
       // changePic(i+1);此处不能写i+1.因为i在事件触发执行前已经为5，事件被触发时，i仍然时5。
      //思路：给alt添加属性值并获取。
      // console.log(img.alt);此处也不能时img的alt。第一次进来i=0，是往索引号为0的图片上绑定一个事件。
      //索引号为4的小图片的alt。
      //console.log(this);//永远指向当前对象。
      changePic(this.alt);
    }
}
    function changePic(imgName) {  
        var bigImg = document.getElementById("bigImg");
        bigImg.src = "images/0" + imgName + "big.jpg";
    }
</script>
</body>
</html>

代码优化：
//给下面所有的小图片注册事件，点击小图片让上面的大图片的src变为和小图对应的大图

<script>
    //给下面所有的小图片注册事件，点击小图片让上面的大图片的src变为和小图对应的大图
var ul=document.getElementById('itemList');
var imgs=ul.document.getElementsByTagName('img');//所有小图片
for (var i = 0; i < imgs.length; i++) {
    var img=imgs[i];//每一个小图片。
    img.onclick=function(){
        //获取大图 设置大图的src
        var bigImg=document.getElementById('bigImg');
        bigImg.src="images/0"+this.alt+"big.jpg";
}
</script>