美文网首页
简写轮播图

简写轮播图

作者: 给我小前端 | 来源:发表于2017-06-22 09:36 被阅读13次

    // 轮播图
    var time;
    time = setInterval(step, 5000);

    function step() {
        if(parseFloat($('.product_contant ul').css('margin-left')) >= 0) {
            $('.product_contant ul').animate({
                'margin-left': '-302px'
            }, 3000, 'linear', function() {
                var html = $('.product_contant ul').children('li:first-child').html();
                var ul = $('.product_contant ul').children('li:first-child').remove();
                $('.product_contant ul li:last-child').after("<li>" + html + "</li>");
                $('.product_contant ul').css('margin-left', '0px');
            });
        }
    }
    
    function step1() {
    
        if(parseFloat($('.product_contant ul').css('margin-left')) <= 0) {
            $('.product_contant ul').animate(0, function() {
                var html = $('.product_contant ul').children('li:last-child').html();
                var ul = $('.product_contant ul').children('li:last-child').remove();
                $('.product_contant ul li:first-child').before("<li>" + html + "</li>");
                $('.product_contant ul').css('margin-left', '-302px');
            });
            $('.product_contant ul').animate({
                'margin-left': '0px'
            }, 3000, "linear");
        }
    }
    $('.product_contant').mouseenter(function() {
        clearInterval(time);
    })
    $('.product_contant').mouseleave(function() {
        setTimeout(function() {
            time = setInterval(step, 5000);
        }, 3000)
    })
    $('.product_contant .before').click(function() {
        if(parseFloat($('.product_contant ul').css('margin-left')) >= 0) {
            //          $('.product_contant ul').stop(true, false);
            step1();
        }
    });
    $('.product_contant .after').click(function() {
        if(parseFloat($('.product_contant ul').css('margin-left')) <= 0) {
            //          $('.product_contant ul').stop(true, false);
            step();
        }
    })

    相关文章

      网友评论

          本文标题:简写轮播图

          本文链接:https://www.haomeiwen.com/subject/tibxcxtx.html