簡寫輪播圖

// 輪播圖
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,686評論 1 22
  • 今夜清冷 陰云遮月 也是這樣的時間 姥爺的肩膀扛起了我的眺望 盡管那晚也沒有星星 小時候趕集好幾里路 懶惰任性的我...
    安嫚兒閱讀 381評論 1 3