JS小功能系列1换一批

最新推荐文章于 2023-10-23 10:43:09 发布

weixin_33854644

最新推荐文章于 2023-10-23 10:43:09 发布

阅读量872

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xingkongly/p/7603639.html

版权

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .l {
            float: left;
        }

        .r {
            float: right;
        }

        .c:after {
            clear: both;
            width: 0;
            height: 0;
            content: "";
            display: block;
            visibility: hidden;
        }

        .active {
            display: block!important;
        }

        .head {
            width: 700px;
        }

        .top {
            padding: 10px 0px;
        }

        .bottom {
            width: 700px;
            background: orange;
        }

        .bottom div {
            display: none;
        }

        .bottom div ul {
            float: left;
            width: 33%;
        }

        .bottom div ul li {
            text-align: center;
        }

        .bottom div ul li img {
            width: 200px;
        }
    </style>
    <script>
        window.onload = function () {
            var change = document.querySelector(".top a"),
                bottom = document.querySelector(".bottom"),
                div = document.querySelectorAll(".bottom div"),
                index = 0;
            change.onclick = function () {
                 for(var i=0,len=div.length;i<len;i++){
                     div[i].className="";
                 }
                  index++;
                  //index等于div数组的长度
                  if(index==len) index=0;
                  div[index].className="active";
              
            }



        }
    </script>
</head>

<body>
    <div class="head">
        <div class="top">
            <span>热门推荐</span>
            <a href="javascript:;" class="r">换一批</a>
        </div>

        <div class="bottom c">
            <div class="active">
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/1.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>111111111111</li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/1.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>1111111111111</li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/1.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>111111111111111111</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/2.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>22222222222222</li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/2.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>22222222222222</li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/2.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>22222222222222</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/3.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>3333333333333333333</li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/3.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>3333333333333333333</li>
                </ul>
                <ul>
                    <li>
                        <a href="javascript:;">
                      <img  src="./pic/3.jpg">
                      </a>
                    </li>
                    <li>价格</li>
                    <li>3333333333333333333</li>
                </ul>
            </div>


        </div>


    </div>

</body>