简写轮播图

2017-06-22  本文已影响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();
    }
})
上一篇下一篇

猜你喜欢

热点阅读