sponsored links

图片展示的大小图切换

1、具体代码:

<title>大小图切换</title>
    <script>
        window.onload=function(){
            var ip = document.getElementById("ni");
            var img = ip.getElementsByTagName("img");
                for (var i = 0; i < img.length; i++) {
                    img[i].onmousemove= function(){
                       var big = document.getElementById("wo");
                         big.src= this.getAttribute("data");
                   }
                }
            }    
    </script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .show{
        width: 400px;
        height: 480px;
        margin: 50px auto;
    }
    .show p img{
        width: 400px;
        height: 400px;
        border: 1px solid orange;
    }
    .show ul{
        list-style: none;
    }
    .show ul li{
        float: left;
        margin: 5px 10px 5px;
    }
</style>

<body> 
    <div class="show" id="tushow">
        <p ><img src="img/01.jpg" id="wo"/></p>
        <ul id="ni">
            <li><img src="img/1.jpg" data="img/01.jpg" /></li>
            <li><img src="img/2.jpg" data="img/02.jpg" /></li>
            <li><img src="img/3.jpg" data="img/03.jpg"/></li>
            <li><img src="img/4.jpg" data="img/04.jpg"/></li>
        </ul>
    </div>
</body>
</html>

2、实现的效果:

图片展示的大小图切换

 

Tags: