JS之美女相册

Posted 2020-10-18 凉白开的你

目的：点击一张小图片会在下方展示出大图片，大图片下方会有该图片的标题

实现：让小图片的href赋值给Img的src，让title赋值给innerhtml

注意：这里的图片有很多，把它们当成一个数组进行操作即可

<ul id="imagegallery">
<li>
<a href="../images/11.jpg" title="美女A">
<img src="../images/1-small.jpg" alt="美女1">
</a>
</li>
<li>
<a href="../images/22.jpg" title="美女B">
<img src="../images/2-small.jpg" alt="美女2">
</a>
</li>
<li>
<a href="../images/33.jpg" title="美女C">
<img src="../images/3-small.jpg" alt="美女3">
</a>
</li>
<li>
<a href="../images/44.jpg" title="美女D">
<img src="../images/4-small.jpg" alt="美女4">
</a>
</li>
</ul>
<div class="clear"></div>
<img src="../images/placeholder.png" width="450" id="image" height="250" />
<p id="des">选择一个图片</p>

　　下面是实现功能的javascript代码

 

 

<script>
//需求：点击小图片，改变下边大图片的src，为它赋值a链接的href属性值
//让p标签的innerHTML属性值变成a标签的title属性值
//获取事件源和图片
var ul = document.getElementById("imagegallery");
var aArr = ul.getElementsByTagName("a");
var img = document.getElementById("image");
var des = document.getElementById("des");
//绑定事件
//以前是一个一个的绑定，现在是一个数组 for循环绑定
for (var i = 0; i < aArr.length; i++) {
    aArr[i].onclick =function (){
        //书写事件驱动程序
        //修改书写
        //this指的是函数调用者，和i没关系，所以不会出错
        img.src = this.href;
        // img.src = aArr[i].href;
        des.innerHTML = this.title;
        return false;
    }
}
</script>