简写轮播图

// 轮播图
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();
    }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 轮播图制作主要思路:实现轮播图滚动的效果,主要是使用animate()函数来实现这个过渡的动画效果。当向左点击时,...
    XingIven阅读 570评论 2 2
  • 进入前端将近一年了,js还是很弱,突发奇想写一个轮播图,就找到了这个博主的材料,和大家分享。 轮播图的原理: 一系...
    FRRRR阅读 3,684评论 0 11
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,807评论 0 8
  • 原作者:Nick Babich 翻译者:Puddinnng 本教程为翻译教程,原文地址为: http://babi...
    Puddinnng阅读 4,684评论 1 22
  • 今夜清冷 阴云遮月 也是这样的时间 姥爷的肩膀扛起了我的眺望 尽管那晚也没有星星 小时候赶集好几里路 懒惰任性的我...
    安嫚儿阅读 379评论 1 3