在没有任何插件的jquery中可滚动,旋转木马,滑块 - 最简单的方法

Question

我正在寻找有关循环动画的jQuery滑块(如可滚动插件)的教程.没有任何插件,最简单的方法,教程

Answer 1

更新日期:2014年8月27日

• 演示: http ://so.lucafilosofi.com/scrollable-carousel-slider-in-jquery-without-any-plugin-the-simplest-way

    $(function() {
        /* author: Luca Filosofi * contact: aseptik@gmail.com * http://devilmaycode.it * license: Public * Updated: 27/08/2014 */
        var animating = false, iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = (liW * $slider.find('li').length);
        $slider.width(liFW);
        $('.button a').on('click', function(e) {
            e.preventDefault();
            if(!animating){
                var left = Math.abs(parseInt($slider.css('left')));
                var side = ($(this).data('direction') == 'right')  ? (((left + (liW * iXS)) >= liFW) ? 0 : -(left + liW)) : ((left > 0) ? -(left - liW) : -(liFW - (liW * iXS)));
                rotate(side);
            }
        });
        var rotate = function(leftY) {
            if(!animating){
                animating = true;
                $slider.stop(true, true).animate({left : leftY}, 500, function(){animating = false;});
            }
        }
    });