js实现导航自动切换请求数据 

<!doctype html>
<html lang="'en">

<head>
    <meta charset="UTF-8">
    <title>Tab切换-自动</title>
    <script src="js/jquery.js"></script>
</head>
<style>
    .info-flow-nav {
        overflow: hidden;
    }
    
    .info_ul {
        margin: 20px auto;
        list-style: none;
        width: 100%;
        height: 40px;
        position: relative;
        background: #000;
    }
    
    .info_ul li {
        float: left;
        color: #fff;
        line-height: 40px;
        padding-left: 6px;
        padding-right: 6px;
        cursor: pointer;
        transition: background ease .6s;
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        margin-left: 40px;
    }
    
    .active {
        background-color: #c00;
    }
</style>

<body>
    <ul id="infoflow-right-nav-ul" class="info_ul">
        <li class="li_a active" data-id="180" id="0">评论数排行</li>
        <li class="li_a" data-id="181" id="1">图片排行</li>
        <li class="li_a" data-id="182" id="2">国内点击量</li>
        <li class="li_a" data-id="183" id="3">国内评论数</li>
        <li class="li_a" data-id="184" id="4">国际点击量</li>
    </ul>
</body>
<script>
    window, onload = function() {
        var timer = null;
        var num = 0;
        var uls = document.getElementById('infoflow-right-nav-ul');
        var lis = uls.getElementsByTagName('li')
        timer = setInterval(autoplay, 3000);
        for (var i = 0; i < lis.length; i++) {
            lis[i].id = i
            lis[i].onmouseover = function() {
                clearInterval(timer);
                changTab(this.id);
            }
            lis[i].onmouseout = function() {
                timer = setInterval(autoplay, 3000);
            }
        }

        function autoplay() {
            num++;
            if (num >= lis.length) {
                num = 0;
            }
            changTab(num);
        }

        function changTab(curnum) {
            $('.info_ul li').removeClass('active')
            var lis_id = $(lis[curnum]).attr('data-id')
            $(lis[curnum]).attr('class', 'active')
            $.ajax({
                type: 'get',
                url: 'url',
                dataType: 'json',
                data: {
                    size: 10,
                    page: 1,
                    cate_id: lis_id
                },
                success: function(data) {
                    console.log(data)
                }
            })
            num = curnum;
        }
    }
</script>

</html>

　　

posted @ 2020-11-17 15:43  YH丶浩  阅读(180)  评论(0)    收藏  举报