twoyoung-Daily-train
/
京东商品展示CSS.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        /*window.onload = changeImg();
         function changeImg(imgname) {
         var demo = document.getElementById("imgname");
         demo.src = "images/0" + imgname + "big.jpg";
         }*/
        /* function showImg() {
         window.onload = showImg;
         var ul = document.getElementById("itemList");
         //获取iditemList里面所有的小图标签,getElementsByTagName可以被普通对象调用
         var imgs = ul.getElementsByTagName("img");
         var demo = document.getElementById("imgname");
         for (i = 0; i < imgs.length; i++) {
         var img = imgs[i];//每一张小图
         img.onclick = function () {//小图对象动作
         demo.src = "images/0" + this.alt + "big.jpg";
         }
         }
         }*/
    </script>
</head>
<body>
<!--<div id="box">
    <img src="images/01big.jpg" alt="" id="imgname"/>
    <ul id="itemList">
        <li><img src="images/01.jpg" onclick="changeImg(1)" alt="鼠标" title="鼠标"/></li>
        <li><img src="images/02.jpg" onclick="changeImg(2)" alt="鼠标" title="鼠标"/></li>
        <li><img src="images/03.jpg" onclick="changeImg(3)" alt="鼠标" title="鼠标"/></li>
        <li><img src="images/04.jpg" onclick="changeImg(4)" alt="鼠标" title="鼠标"/></li>
        <li><img src="images/05.jpg" onclick="changeImg(5)" alt="鼠标" title="鼠标"/></li>
    </ul>
</div>-->
<div id="box">
    <img src="images/01big.jpg" alt="" id="imgname"/>
    <ul id="itemList">
        <li><img src="images/01.jpg" alt="1" title="鼠标"/></li>
        <li><img src="images/02.jpg" alt="2" title="鼠标"/></li>
        <li><img src="images/03.jpg" alt="3" title="鼠标"/></li>
        <li><img src="images/04.jpg" alt="4" title="鼠标"/></li>
        <li><img src="images/05.jpg" alt="5" title="鼠标"/></li>
    </ul>
</div>
<!--<script type="text/javascript">
    var ul = document.getElementById("itemList");
    //获取iditemList里面所有的小图标签,getElementsByTagName可以被普通对象调用
    var imgs = ul.getElementsByTagName("img");
    var demo = document.getElementById("imgname");
    for (i = 0; i < imgs.length; i++) {
        var img = imgs[i];//每一张小图
        img.onclick = function () {//小图对象动作
            demo.src = "images/0" + this.alt + "big.jpg";
        }
    }
    console.log(imgs);
</script>-->
<script type="text/javascript">
    var list = document.getElementById("itemList");
    var imgs = list.getElementsByTagName("img");
    var bigimg = document.getElementById("imgname");
    for (i = 0; i < imgs.length; i++) {
        //对元素单个控制，所以对象方法写在循环内部，获取一个元素注册一个事件
        var img = imgs[i];
        img.onmouseover = function () {
            bigimg.src = "images/0" + this.alt + "big.jpg";
        }
    }
</script>
</body>
</html>