Javascript 不带按钮的滑块-前/下一个li触发滑块

我正试图通过实际的上一张/下一张幻灯片触发的上一张/下一张动作来获得一个旋转木马

我可以让它工作，但我想幻灯片移动与动画过渡。我所能想到的只是一种淡出/淡出的效果，这并不能完全消除它

单击.prev/.next>后，您是否可以建议我平滑移动.prev/.next>.main

HTML:

jQuery：

$('body').on('click', 'li.prev', function() {
    $("body").find( "li" ).eq( 2 ).removeClass("next")
    $(this).next().removeClass().addClass("next");
    $(this).removeClass().addClass("main");
    $(this).prev().removeClass().addClass("prev");

    var $this = $(this),
        callback = function() {
            $this.siblings(':last()').insertBefore($this).addClass("prev");
        };
    $this.fadeIn(100, callback).fadeIn(100);
}); 

$('body').on('click', 'li.next', function() {
    $("body").find( "li" ).eq( 1 ).removeClass("prev")
    $(this).prev().removeClass().addClass("prev");
    $(this).removeClass().addClass("main");
    $(this).next().removeClass().addClass("next");

    var $this = $(this),
        callback = function() {
            $this.siblings(':first()').insertAfter($this.siblings(':last()'));
        };
    $this.fadeOut(100, callback).fadeIn(100);
}); 

以下是全文：

--

---

还有，有没有办法让.prev/.next李的利润率更高？我在努力，但一定是某种排列方式，把所有的李都排到了最高的位置。我希望主Li的位置高于.PRV/下一个。

< P>你要问的是复杂的，因为有很多事情要考虑。p> 另一个选项是在现有滑块的基础上构建所需的功能。 像这样：

HTML:

（免责声明，我是所用插件背后的人）

---

您可以在插件网站上找到更多文档：

使用CSS转换，这种效果很容易实现

关键是这行代码：

.view ul li {
    /* ... */
    transition: all 0.5s ease;
}

当然，如果你想对浏览器格外友好，你可以这样做：

.view ul li {
    /* ... */
    transition: margin-left 0.5s ease, margin-right 0.5s ease;
}

这样，浏览器只需计算

左边距

和

右边距

，而不必计算所有属性

不要忘记从jQuery中删除

fadeIn

和

fadeOut

以下是JSFIDLE上的演示：

CSS3转换是一个惊人的规范，它允许您在不使用JavaScript的情况下制作各种动画。您可以在此处查看文档：

---

谢谢@Richtik，它很有魅力。然而，当我移除faceIn和fadeOut效果时，它会有点断裂，但我对效果很好/不知道为什么断裂。无论如何，谢谢你！！：）

<div id="container" style="width: 100%;overflow: hidden;">
    <div style="position:relative;width: 50%;margin: 0 auto;">
        <div id="slider" style="width: 100%;overflow: visible !important;">
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/01.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/02.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/03.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/04.jpg" alt="img" />
            <img src="http://webbies.dk/assets/files/SudoSlider/package/images/05.jpg" alt="img" />
        </div>
    </div>
</div>

$(document).ready(function(){
    var sudoSlider = $("#slider").sudoSlider({
        continuous:true,
        prevNext: false,
        initCallback: function () {
            this.css("overflow", "visible");
        }
    });

    $("body").on("click", ".slide", function (e) {
        var slide = Number($(e.target).attr("data-slide"));
        sudoSlider.goToSlide(slide);
    });
});

.view ul li {
    /* ... */
    transition: all 0.5s ease;
}

.view ul li {
    /* ... */
    transition: margin-left 0.5s ease, margin-right 0.5s ease;
}