Javascript 使用jQuery创建简单、全宽、无限旋转木马

我正在用jquery创建一个滑块。我在网上看过是否可以使用任何已经制作好的插件，但没有一个插件可以满足我的需要

在我正在工作的一个站点上，我有一个1260px的容器，其中包含内容

滑块是全宽的，中间是活动的幻灯片，侧面是上一张和下一张幻灯片，应该用作上一张和下一张单击

我计划在滑块上展开，以便在它下面有缩略图，但现在我需要使滑块工作

HTML为（图像为1260x520px）

jQuery代码：

jQuery(document).ready(function($) {

    $('.slider').each(function () {
        var $slider = $(this);
        var autoplay = $slider.data("autoplay");
        var items = $slider.data("items");
        var easing = $slider.data("easing");
        var duration = $slider.data("duration");
        var $single_slide = $slider.find('.single_slide');
        var slider_height = $single_slide.css('height', $slider.data('height')+'px');
        var left_offset = ($(window).width()-1260)/2;

        $slider.css({'width' : $single_slide.length*1260+'px', 'left':- 1260+left_offset + 'px'});

        $single_slide.eq(1).addClass('active');

        var $prev = $('.active').prev();
        var $next = $('.active').next();

        function moveLeft() {
            var $a = $('.active');
            $a.removeClass('active').prev().addClass('active');
            $slider.animate({
                left: parseInt($slider.css('left'), 10) + $single_slide.outerWidth(true),
                easing: easing,
                step: items,
            }, duration, function () {
                $('.single_slide:first').before($('single_slide:last'));
            });
        }

       function moveRight() {
            var $a = $('.active');
            $a.removeClass('active').next().addClass('active');
            $slider.animate({
                left: parseInt($slider.css('left'), 10) - $single_slide.outerWidth(true),
                easing: easing,
                step: items,
            }, duration, function () {
                $('.single_slide:last').after($('single_slide:first'));
            });
        }

        $prev.click(function () {
            moveLeft();
        });

        $next.click(function () {
            moveRight();
        });

        if (autoplay == 1) {
            setInterval(function () {
                moveRight();
            }, duration);
        }

    });

});

我还创建了一个，因此您可以下载html文件

我最初是为wordpress做这件事的，但工作原理是一样的

---

问题在于，单击“上一幅”或“下一幅”后，图像的附加似乎不起作用。类的切换是有效的，但是当你点击它们时，下一个和上一个图像不会改变（我做了类似的事情，但是上一个/下一个按钮是固定的元素，所以我可以一直以它们为目标，但在这里它们正在改变）

我想我找到了上一个和下一个选择器问题的根源。它们作为变量缓存了一次，但在

活动

类更改为另一张幻灯片时从未更新，因此事件侦听器将保留最初设置为活动幻灯片同级的元素：

var $prev = $('.active').prev();
var $next = $('.active').next();

不幸的是，这似乎不起作用：

$('.active').prev().click(function() { ... });

但这几乎起到了作用：

$('.slider').find($('.single_slide').eq($('.active').index()+2)).click(function() {
  moveLeft();
});

$('.slider').find($('.single_slide').eq($('.active').index()-1)).click(function() {
  moveRight();
});

更新-使用

.detach（）

方法和委托事件侦听器使其功能化和无限化：

我相信有一些优化的空间，但它似乎做到了。具有跟踪可能不需要的图像的功能（但便于调试）

---

现在了解一些刷卡支持：-如果可以的话，在你开始的时候喊我一声。我会对这样一个基本的滑块感兴趣。B-）一个简单的解决方案是添加上一个和下一个“按钮”，该按钮将重叠非活动图像的部分（绝对定位），这将解决该问题。但是，将图像设置为“上一个”和“下一个”按钮会很酷。我会看看我能做些什么。我刚刚意识到，只有在每次接近终点时，在最后一张幻灯片之后添加相同的幻灯片，才能实现“无限”平滑滑动（以我的方式）。但这会使DOM过载（不是一个好的解决方案）。我可以创建一个有限滑块，然后我可以从左向右移动，但无限旋转木马不起作用：\这（有限滑块）将是我通常采用的方法。但你最初的想法肯定有吸引力，所以我不确定我是否准备放弃它。哈哈，让我重温一下剧本。。。还可以添加一些刷卡支持。：-）很高兴能帮忙，这是一个有趣的练习。有这样的剧本会很方便的。顺便说一句，我不是在开玩笑（在活动图像上）滑动，那不需要太多代码。但也许我会开一个GitHub帐户（还没有），看看我是否能在那里贡献更多。干杯

$('.active').prev().click(function() { ... });

$('.slider').find($('.single_slide').eq($('.active').index()+2)).click(function() {
  moveLeft();
});

$('.slider').find($('.single_slide').eq($('.active').index()-1)).click(function() {
  moveRight();
});

$('.slider').each(function() {

    var slider = $(this);
    var autoplay = slider.data('autoplay');
    var items = slider.data('items');
    var easing = slider.data('easing');
    var duration = slider.data('duration');
    var single_slide = slider.find('.single_slide');
    var slider_height = single_slide.css('height', slider.data('height'));
    var offset = ($(window).width()-1260)/2-1260;

    $.each(single_slide, function(index) {
        if (index == 0) $(this).addClass('img' + single_slide.length);
        else $(this).addClass('img' + index);
    });

    slider.css({'width': single_slide.length*1260, 'left': offset});
    single_slide
    .eq(0).addClass('prev').end()
    .eq(1).addClass('active').end()
    .eq(2).addClass('next');

    function moveLeft() {

        $('.active').removeClass('active').prev().addClass('active');

        slider.animate({
            left: slider.position().left+single_slide.outerWidth(true),
            easing: easing,
            step: items
        }, duration, function() {
            $('.single_slide:last').detach().prependTo(slider);
            slider.css('left', offset);
            newNav();
        });
    }

    function moveRight() {

        $('.active').removeClass('active').next().addClass('active');

        slider.animate({
            left: slider.position().left-single_slide.outerWidth(true),
            easing: easing,
            step: items
        }, duration, function() {
            $('.single_slide:first').detach().appendTo(slider);
            slider.css('left', offset);
            newNav();
        });
    }

    function newNav() {

        $('.prev').removeClass('prev');
        $('.next').removeClass('next');
        $('.single_slide')
        .eq(0).addClass('prev').end()
        .eq(2).addClass('next');
    }

    $(document).on('click', '.prev', function() {
        moveLeft();
    });

    $(document).on('click', '.next', function() {
        moveRight();
    });

    if (autoplay == 1) {
        setInterval(function() {
            moveRight();
        }, duration);
    }

});