table采用定位实现轮播

小鱼儿 2024-04-18 16:11 66阅读 0赞

今天和大家简单介绍一下table的轮播的自动切换 \`\`\` \* \{ padding: 0; margin: 0; \} .one \{ width: 500px; margin: 0 auto; \} .tabHead li \{ float: left; width: 60px; background: skyblue; color: snow; list-style-type: none; text-align: center; height: 30px; line-height: 30px; \}

.tabHead li.active {
            background: #55a532;
        }
    
        .clear {
            clear: both;
        }
    
        .tabList {
            font-size: 0px;
            position: relative;
            height: 300px;
            width: 300px;
            background: #ccffaa;
            overflow: hidden;
        }
    
        .tabList div {
            height: 300px;
            width: 300px;
            font-size: 14px;
            position: absolute;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2_size_16_color_FFFFFF_t_70]

js内容
     $(function () {
            // 初始的时候的当前处于活动状态的元素索引
            var current = $('.tabHead li.active').index();
            $('.tabList div').each(function (x, y) {
                $(y).css('left', x * 300 + 'px');
            });
            $('.tabHead li').mouseover(function () {
                // 触发事件后的时候的当前处于活动状态的元素索引
                var i = $(this).index();
                if (i != current) {
                    var num = i - current;
                    // 将当前的处于活动状态的元素变更一下
                    current = i;
                    $(this).addClass('active').siblings().removeClass('active');
                    // 如果 num > 0 下面的大块内容从右往左滑动
                    // 如果 num < 0 下面的大块内容从左往右滑动
                    // 可以通过他们的定位值进行改变
                    $('.tabList div').each(function (x, y) {
                        var left = x * 300 - current * 300;
                        $(y).stop(true, true).animate({
                            left: left + 'px'
                        }, 500);
                    });
                }
            });
    
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R5eDE5OTcxMDI2_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/765cfa0ab50b4d5faedf6b79fc8ce74b.png