天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）

效果如下：

 

图片去天猫主页扣，就不上传了

 

 

html代码：

<body>
<div class="xuanxiangka">
    <div class="tab-box">
        <ul>
            <li class="current">
                <img src="images/2.jpg" alt="">
                <a href="#">
                    <img src="./images/4.jpg" alt="" class="img1">
                    <img src="./images/3.jpg" alt="" class="img2">
                    <span class="span1">进口牛奶</span>
                    <span class="span2">第二件0元</span>
                    <span class="span3"></span>
                </a>
            </li>
            <li>
                <img src="images/1.jpg" alt="">
                <a href="#">
                    <img src="./images/4.jpg" alt="" class="img1">
                    <img src="./images/3.jpg" alt="" class="img2">
                    <span class="span1">全球零食</span>
                    <span class="span2">第二件0元</span>
                </a>
                <span class="span3"></span>
            </li>
            
        </ul>
        <ol>
            <li class="current">今日疯抢</li>
            <li>量贩装</li>
        </ol>
    </div>
</div>
</body>

 

css代码：

*{
    margin:0;
    padding:0;
}
body{
    font-family: "微软雅黑";
    font-size:16px;
}
ul,ol,li{
    list-style:none;
}
b,strong{
    font-weight:normal;
}
em,i{
    font-style:normal;
}
a,u{
    text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
    font-size: 16px;
}
input{
    outline: none;
}


body{
        background: seagreen;
    }
.xuanxiangka{
    width: 483px;
    height: 298px;
    background: red;
    margin: 50px auto;
    border: 1px solid snow;
}
.xuanxiangka .tab-box{
    width: 465px;
    height: 280px;
    position:relative;
    cursor: pointer;
    background: black;
    margin-left: 10px;
    margin-top: 10px;
}
.xuanxiangka .tab-box ul{
    width: 465px;
    height: 223px;
    float: right;
    background: white;
    margin-top: 57px;
}
.xuanxiangka .tab-box ul li{
    width: 232px;
    height: 223px;
    display:none;
    position: relative;
}
.xuanxiangka .tab-box ul li img{
    width: 200px;
    height: 200px;
    margin-top: 23px;
    float: right;
    margin-right: -200px; 
}
.xuanxiangka .tab-box ol{
    width: 465px;
    height: 57px;
    position:absolute;
    background:#b7b7b7;
}
.xuanxiangka .tab-box ol li{
    width: 231px;
    height: 57px;
    background:#ccc;
    float: left;
    text-align:center;
    line-height: 57px;
    display: block;
}
.xuanxiangka .tab-box ol li.current{
    background:#00b262;
    color: white;
}
.xuanxiangka .tab-box ul li.current{
    display:block;
}
.xuanxiangka .tab-box .img1{
        position: absolute;
        bottom: 50px;
        z-index: 999;
        width: 291px !important;
        height: 87px !important;
    }
    .xuanxiangka .tab-box .img2{
        width: 23px !important;
        height: 23px !important;
        position: absolute;
        top: 73px;
        left: 25px;
        z-index: 9999;
    }
    .xuanxiangka .tab-box .span1{
        display: block;
        width: 100px;
        height: 31px;
        position: absolute;
        line-height: 31px;
        top: 92px;
        left: 48px;
        z-index: 9999;
        text-align: center;
        color: #00b262;
        font-size: 20px;
        font-weight: bolder;
    }
    .xuanxiangka .tab-box .span2{
        display: block;
        width: 89px;
        height: 26px;
        font-size: 16px;
        line-height: 26px;
        text-align: center;
        color: black;
        position: absolute;
        top: 125px;
        left: 25px;
        z-index: 9999;
    }
    .xuanxiangka .tab-box .span3{
        display: block;
        width: 465px;
        height: 223px;
        background:rgba(255, 255, 255, 0.3);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99999;
        display: none;
    }
    .xuanxiangka .tab-box:hover .span3{
        display: block;
    }

 

js代码：

<script type="text/javascript">
var index = 0;
var timer;
$(".tab-box>a.right").click(()=>{
    index++;
    if(index==$(".tab-box ul li").length){
        index = 0;
    }
    $(".tab-box ul li").eq(index).addClass("current").siblings().removeClass("current").parent().next().children().eq(index).addClass('current').siblings().removeClass('current')
})
$(".tab-box>a.left").click(()=>{
    index--;
    if(index<0){
        index = $(".tab-box ul li").length-1;
    }
    $(".tab-box ul li").eq(index).addClass("current").siblings().removeClass("current").parent().next().children().eq(index).addClass('current').siblings().removeClass('current')
})
$(".tab-box ol li").mouseover(function(){
    index = $(this).index()
    $(".tab-box ul li").eq(index).addClass("current").siblings().removeClass("current").parent().next().children().eq(index).addClass('current').siblings().removeClass('current')
})
timer = setInterval(function(){
    index++;
    if(index==$(".tab-box ul li").length){
        index = 0;
    }
    $(".tab-box ul li").eq(index).addClass("current").siblings().removeClass("current").parent().next().children().eq(index).addClass('current').siblings().removeClass('current')
},1500)
$(".tab-box").hover(()=>{
    clearInterval(timer);
},()=>{
    timer = setInterval(function(){
        index++;
        if(index==$(".tab-box ul li").length){
            index = 0;
        }
        $(".tab-box ul li").eq(index).addClass("current").siblings().removeClass("current").parent().next().children().eq(index).addClass('current').siblings().removeClass('current')
    },1500)
})
</script>

 

到jquery插件库下载jquery插件引入：

<script src="./js/jquery-3.4.1.js"></script>

　　

posted @ 2020-08-21 20:55  结发授长生  阅读(405)  评论(0)    收藏  举报