建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > Javascript/Ajax

js 换一换内容代码

来源:建站教学网  时间:2019-08-15 10:11:04

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;

        box-sizing: border-box;
    }
    ul li{
        list-style: none;
    }
    a,a:active,a:hover {
        color: black;
        text-decoration: none;

    }
    .changeone{
        width: 100%;
        height: 140px;
        border-bottom:8px solid #eeeeee;
        font-size: 14px;
    }

    .changeone ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: 80px;
    }

    .changeone ul li{
        flex: 1;
        width: 25%;
        min-width: 25%;
        padding: 5px;
        text-align: center;
        margin-top: 10px;
    }
    .changeone ul li span{
        padding: 4px 5px;
        border:  1px solid #fe7702;
        border-radius: 6px;
    }

    .huan{
        text-align:center; 
        font-family:"微软雅黑";  
        color:gray;
        font-size: 16px;
        font-weight: bold;
    }

    .huanbox{
        margin-top: 10px;
        text-align: center;
    }
</style>
</head>
<body>
    <!-- 换一批 -->
    <div class="changeone">
        <ul>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>
            <li><a href="#"><span>情侣旅行</span></a></li>

            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>
            <li><a href="#"><span>亲子旅行</span></a></li>

            <li><a href="#"><span>新婚旅行</span></a></li>
            <li><a href="#"><span>新婚旅行</span></a></li>
            <li><a href="#"><span>新婚旅行</span></a></li>
            <li><a href="#"><span>新婚旅行</span></a></li>
        </ul>


        <div class="huanbox"><a href="javascript:void(0)"><span class="huan">换一批</span></a>  </div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>        

    <script type="text/javascript">
        var changeindex=1;
        var clickindex=2;
        $(".changeone li").each(function(index,element){      
            if(index/8<changeindex){

                element.className="change"+changeindex;
            }else{
                changeindex++;
                element.className="change"+changeindex;
            }
        })
        $(".change1").siblings().css("display","none");
        $(".change1").show();
        $(".huan").click(function(){
            if(clickindex<=changeindex){
                $(".change"+clickindex).siblings().css("display","none");
                $(".change"+clickindex).show();
                clickindex++;
            }else{
                clickindex=1;
                $(".change"+clickindex).siblings().css("display","none");
                $(".change"+clickindex).show();
            }

        });
    </script>
</body>
</html>

责任编辑:风中的自由

免责声明:建站教学网内容来源于本网和互联网,如媒体、公司、企业或个人对该部分主张知识产权,请与本站联系,本网站将迅速采取适当措施,否则,与之有关的知识产权纠纷本网站不承担任何责任。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2019, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号