zoukankan      html  css  js  c++  java
  • JS淘宝浏览商品

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相册</title> 
        <style>
            *{
                margin:0;
                padding:0;

            }
            ul{
                list-style: none;
                overflow: hidden;
            }
            ul li{
                float: left;
                 55px;
                height: 40px;
                margin-top: 10px;
                margin-left: 10px;
                border: 2px solid #fff;
            }
                ul li.active{
                    border-color: red;
                }
        </style>
    </head>

    <body>
            <img src="img/1.jpeg" id="img">
            <ul>
                <li>
                    <a href="">
                        <img src="img/1.jpeg" width="55px" height="40px" class="small">
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="img/2.jpeg" width="55px" height="40px"  class="small">
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="img/3.jpeg" width="55px" height="40px" class="small">
                    </a>

                </li>
                <li>
                    <a href="">
                        <img src="img/4.jpeg" width="55px" height="40px"  class="small">
                    </a>
              </li>
            </ul>
       <script>
        var big=document.getElementById('img');
        var small=document.getElementsByClassName('small');
        for(var i=0;i<small.length;i++)
        {
            small[i].onmouseover=function()
            {
                for(var j=0;j<small.length;j++)
                {
                    small[j].parentNode.parentNode.setAttribute('class','');
                }
                var smalls=this.getAttribute('src');
                big.setAttribute('src',smalls);

                this.parentNode.parentNode.setAttribute('class','active');
            }
        }
        </script>
    </body>

    </html>
  • 相关阅读:
    01
    py5.30
    py 5.28
    py5.25
    py 5.24
    py 5.22
    py5.21
    py 5.18
    py 5.17
    py 5.16
  • 原文地址:https://www.cnblogs.com/lxabner/p/12340928.html
Copyright © 2011-2022 走看看