jq 无缝滚动一屏 marginLeft

原创 韩秀利 随笔 jQery 194阅读 2018-05-30 21:43:41 举报
    var oLiLength = $('.mstd_w ul li').length;
    var oLiWidth = $('.mstd_w ul li').outerWidth(true);
    var showLiMax = Math.ceil($('.mstd_w').width() / oLiWidth);

    if (showLiMax <= oLiLength) { // li的个数大于一屏显示的个数
        var oLiClone = $('.mstd_w ul li').clone(); // 克隆
        $('.mstd_w ul').append(oLiClone);
        $('.mstd_w ul').css({
            width: oLiLength * oLiWidth * 2
        });

        var timer = setInterval(moveAll, 4000);
        $('.mstd').on({
            mouseover: function () {
                clearInterval(timer);
            },
            mouseout: function () {
                timer = setInterval(moveAll, 4000);
            }
        });
    }

    function moveAll() {
        $('.mstd_w ul').stop().animate({
            marginLeft: -showLiMax * oLiWidth
        }, 1000, function () {
            $('.mstd_w ul').append($('.mstd_w ul li:lt(' + showLiMax + ')'));
            $('.mstd_w ul').css({
                marginLeft: 0
            });
        });
    }
    // 下一屏
    $('.mstd .next').click(function (event) {
        if (showLiMax <= oLiLength) {
            moveAll()
        }
    });
    // 上一屏
    $('.mstd .prev').click(function (event) {
        if (showLiMax <= oLiLength) {
            $('.mstd_w ul').css({
                marginLeft: -showLiMax * oLiWidth
            });

            $('.mstd_w ul').prepend($('.mstd_w ul li').slice(oLiLength * 2 - 5, oLiLength * 2));

            $('.mstd_w ul').stop().animate({
                marginLeft: 0
            }, 1000);
        }
    });
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复