无限JavaScript库函数

我有一个使用jQuery的简单图库，它只正确循环一次。我试着将整个过程包装在一个函数中，并通过按钮上的onclick事件调用它，但这不起作用。它应该能够通过点击按钮无限循环

这里有一个，提前谢谢

这是js

$button.carousel\uu trigger.clickfunction{ //首次单击操作 $'container-1'.addClass'hidden'； document.getElementByIdcontainer-2.style.marginLeft=0px； document.getElementByIdcontainer-3.style.marginLeft=325px； //根据单击切换类 如果$'carousel\uu click'.hasClass'secondClick'{ $'carousel_uuclick'。删除类'secondClick'； $'carousel_uuclick'。添加类'thirdClick'； }否则，如果$'carousel\uuu单击'.hasClass'thirdClick'{ $'carousel_uuclick'。删除类'thirdClick'； }否则{ $'carousel_uuclick'.addClass'secondClick'； } //淡出并滑动第2帧和第3帧 $button.secondClick.clickfunction{ document.getElementByIdcontainer-2 $'container-2'.addClass'hidden' document.getElementByIdcontainer-3.style.marginLeft=0px； document.getElementByIdcontainer-1 $'container-1'。删除类'hidden' document.getElementByIdcontainer-1.style.marginLeft=325px； } //淡出并滑动第3帧和第1帧 $button.thirdClick.clickfunction{ document.getElementByIdcontainer-3 $'container-3'.addClass'hidden' document.getElementByIdcontainer-1.style.marginLeft=0px； document.getElementByIdcontainer-1 $'container-1'。删除类'hidden' document.getElementByIdcontainer-1.style.marginLeft=0px； document.getElementByIdcontainer-2 $'container-2'。删除类'hidden' document.getElementByIdcontainer-2.style.marginLeft=325px； } }; .carousel__包装{ 高度：200px； 溢出：隐藏； 位置：相对位置； 宽度：650px； } .旋转木马框架-1{ -webkit转换：所有300ms线性； -moz过渡：所有300ms线性； -ms转换：所有300ms线性； -o型过渡：所有300ms线性； 过渡：所有300ms线性； } .carousel_uu帧-1.hidden{ -moz不透明度：0； 不透明度：0； -moz变换：scale0.01； -webkit转换：scale0.01； -o变换：scale0.01； -ms变换：scale0.01； 变换：scale0.01； } .旋转木马框架-2{ 左边距：325px； -webkit转换：所有300ms线性； -moz过渡：所有300ms线性； -ms转换：所有300ms线性； -o型过渡：所有300ms线性； 过渡：所有300ms线性； } .carousel_uu帧-2.hidden{ -moz不透明度：0； 不透明度：0； -moz变换：scale0.01； -webkit转换：scale0.01； -o变换：scale0.01； -ms变换：scale0.01； 变换：scale0.01； } .旋转木马框架-3{ 左边距：650px； -webkit转换：所有300ms线性； -moz过渡：所有300ms线性； -ms转换：所有300ms线性； -o型过渡：所有300ms线性； 过渡：所有300ms线性； } .carousel_uu帧-3.hidden{ -moz不透明度：0； 不透明度：0； -moz变换：scale0.01； -webkit转换：scale0.01； -o变换：scale0.01； -ms变换：scale0.01； 变换：scale0.01； } .旋转木马框架-1， .旋转木马框架-2， .旋转木马框架-3{ 位置：绝对位置； } .carousel_uucanvas-1{ 背景：555555； 颜色：ffffff； 高度：200px； 宽度：300px； } .carousel__canvas-2{ 背景：333； 颜色：ffffff； 高度：200px； 宽度：300px； } .carousel__canvas-3{ 背景：111人； 颜色：ffffff； 高度：200px； 宽度：300px； } .carousel_uu触发器包装器{ 位置：相对位置； 宽度：100%； 显示：块； } 1. 2. 3. 点击 我只是更新一下 你的 使用泛型函数

function animate(obj1, obj2, obj3){
        obj1.hide();
        obj1.css("marginLeft","650px");
        obj2.show();
        obj2.css("marginLeft","0px");
        obj3.show();
        obj3.css("marginLeft","325px");
}

//init vals
animate($('#container--3'), $('#container--1'), $('#container--2'));
        $("button.carousel__trigger").click(function () {

                switch (document.getElementById("container--1").style.marginLeft) { 
              case '0px':
                animate($('#container--1'), $('#container--2'), $('#container--3'));
                break;
              case '325px':
                    animate($('#container--3'), $('#container--1'), $('#container--2'));
                break;
              case '650px':
                animate($('#container--2'), $('#container--3'), $('#container--1'));
                 }       
});

---

我用if/else语句将其全部封装，从而解决了这个问题。这是你的电话号码

以下是更新的js

        $("button.carousel__trigger").click(function () {

        //first click actions
        document.getElementById("container--3")
        $('#container--3').removeClass('hidden')
        $('#container--1').addClass('hidden');
        document.getElementById("container--2").style.marginLeft = "0px";
        document.getElementById("container--3").style.marginLeft = "625px";

        if ($('#carousel__click').hasClass('secondClick')) {
            document.getElementById("container--2")
            $('#container--2').addClass('hidden')
            document.getElementById("container--3").style.marginLeft = "0px";
            document.getElementById("container--1").style.marginLeft = "625px"
            $('#container--1').removeClass('hidden')
            $('#carousel__click').removeClass('secondClick');
            $('#carousel__click').addClass('thirdClick');
        } else if ($('#carousel__click').hasClass('thirdClick')) {
            document.getElementById("container--3")
            $('#container--3').addClass('hidden')
            document.getElementById("container--1").style.marginLeft = "0px";

            document.getElementById("container--1")
            $('#container--1').removeClass('hidden')
            document.getElementById("container--1").style.marginLeft = "0px";

            document.getElementById("container--2")
            $('#container--2').removeClass('hidden')
            document.getElementById("container--2").style.marginLeft = "625px";
            $('#carousel__click').removeClass('thirdClick');
        } else {
            $('#carousel__click').addClass('secondClick');
        }

    });

---

谢谢Shlomi，这是一个很好的答案，但它只是错过了原始动画的过渡。我找到了一个保留动画的解决方案。不过，你的switch语句比较干净，所以我将尝试整理我的工作。