自動輪播切換tab

時間 2019-12-05

標籤動輪切換 tab 简体版

原文原文鏈接

一個項目中須要用到相似的功能，本身手寫一個輪播切換，不足之處見諒。代碼以下css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .navUl{
            border: 1px solid #ddd;
            overflow: hidden;   
        }
        .navUl li{
            list-style: none;
            float: left;
            width: auto;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            cursor: pointer;
        }
        .navUl li.activeLi{
            background: rgb(155, 155, 247);
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="navUl js-navUl">
        <li class="activeLi">tab1</li>
        <li>tab2</li>
        <li>tab3</li>
        <li>tab4</li>
        <li>tab5</li>
    </ul>
    <div>
        <div id="tabCon0">
                tab0內容
        </div>
        <div id="tabCon1" style="display:none">
                tab1內容
        </div>
        <div id="tabCon2" style="display:none">
                tab2內容
        </div>
        <div id="tabCon3" style="display:none">
                tab3內容
        </div>
        <div id="tabCon4" style="display:none">
                tab4內容
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        window.onload=function(){
            var autoTab = setInterval( changeTab,2000);
            $('.js-navUl').hover(
            function () {
                clearInterval(autoTab);
            }, 
            function () {
                autoTab = setInterval( changeTab,2000);
            });
            var tabIndex=0;
            function changeTab(){
                $(".js-navUl li").eq(tabIndex).addClass("activeLi").siblings().removeClass("activeLi");
                if($("#tabCon"+tabIndex)){
                    $("#tabCon"+tabIndex).show().siblings().hide();            
                }
                tabIndex++;
                if(tabIndex==5){
                    tabIndex=0;
                }
            }
            $(".js-navUl li").on("click",function(){
                var ind=$(this).index();
                if($("#tabCon"+ind)){
                    $("#tabCon"+ind).show().siblings().hide();            
                }
                if(ind!=4){
                    tabIndex=ind+1;            
                }else{
                    tabIndex=0;
                }
                $(this).addClass("activeLi").siblings().removeClass("activeLi");
            });
        }
    </script>
</body>
</html>

樣式什麼的本身修改便可html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。