Javascript图片库

最新推荐文章于 2020-09-22 15:27:40 发布

婼嘸娸倳

最新推荐文章于 2020-09-22 15:27:40 发布

阅读量264

点赞数

文章标签： javascript 编程库图片

本文链接：https://blog.csdn.net/qq_36358940/article/details/77018303

版权

最近在重读JavaScript DOM编程艺术，用原生JS的方法重写第四章JavaScript图片库的案例，
默认显示图片1，当鼠标点击对应的li时，class为container的div容器里面的图片动态改为对应的图片。
其中用的的方法有事件委托，字符串的截取。PS：图片请自行准备。
代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
</head>
<body>
<ul>
    <li>图片1</li>
    <li>图片2</li>
    <li>图片3</li>
    <li>图片4</li>
</ul>
<div class="container">
    <img src="img/1.jpg" alt="显示的图片"/>
</div>
<script>
    var ul=document.getElementsByTagName("ul")[0];
    var lis=document.getElementsByTagName("li");
    var img=document.getElementsByTagName("img")[0];
    ul.onclick=function(e){
        var target= e.target;
        if(target.nodeName.toLowerCase()==="li"){
            var index=target.innerHTML.slice(2);
            console.log(index)
            img.setAttribute("src","img/"+index+".jpg");
        }
    }
</script>
</body>
</html>