js-简单相册

做简单相册，点击小图片，下面的图片进行放大

布局为上下分别为两个div

上面一个div内的图片用a标签包含

页面效果为点击上面div的图片下面的图片换成对应的图片

js思路为：

首先分别找到上面

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相册</title>
    <style type="text/css">
        .smalldiv{
            width:600px;
            height: 150px;
            border:solid #09d 1px;
            margin-bottom: 20px;
            margin: auto; 
        }
        .smalldiv img{
            width:150px;
            height: 100px;
            margin:20px;

        }
        .bigdiv{
            width:600px;
            height: 300px;
            border:solid #09d 1px;
            margin:auto auto;
        }
        .bigdiv img{
            display: block;
            width:250px;
            height:200px;
            margin:30px auto;
        }
    </style>
</head>
<body>
    <div id="small" class="smalldiv">
        <a href="../img/1.jpg">
            <img src="../img/1.jpg"/>
        </a>
        <a href="../img/2.jpg"/>
            <img src="../img/2.jpg">
        </a>
        <a href="../img/3.jpg">
            <img src="../img/3.jpg"/>
        </a>
    </div>
    <div  class="bigdiv">
        <img  id="img" src="../img/4.jpg"/>
    </div>

    <script type="text/javascript">
        var small=document.getElementById('small');
        var links=small.getElementsByTagName('a');
        var len=links.length;
        for(var i=0;i<len;i++){
            var link=links[i];
            var img=document.getElementById('img');
            link.onclick=function(){
                img.src=this.href;
                return false;
            }
        }
        
    </script>


















    <!-- <script type="text/javascript">
        //1.获取所有的a标签对应的元素
        var small=document.getElementById('small');
        var links=small.getElementsByTagName('a');
        //2.给所有的a标签注册事件
        var len=links.length;
        for(var i=0;i<len;i++){
            //获取当前元素
            var link=links[i];
            link.onclick=function(){
                //切换图片
                var img=document.getElementById('img');
                img.src=this.href;
                return false;
            }

        }

    </script> -->
</body>
</html>

 











posted @ 2018-07-28 11:08  啊呀伊  阅读(385)  评论(0)    收藏  举报