Question

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

这里是jsFiddle，谢谢！

这也是js

        $("button.carousel__trigger").click(function () {

            //first click actions
            $('#container--1').addClass('hidden');
            document.getElementById("container--2").style.marginLeft = "0px";
            document.getElementById("container--3").style.marginLeft = "325px";
            
            //switch the class dependent on clicks
            if ($('#carousel__click').hasClass('secondClick')) {
                $('#carousel__click').removeClass('secondClick');
                $('#carousel__click').addClass('thirdClick');
            } else if ($('#carousel__click').hasClass('thirdClick')) {
                $('#carousel__click').removeClass('thirdClick');
            } else {
                $('#carousel__click').addClass('secondClick');
            }

            //fade out and slide frames 2 and 3
            $("button.secondClick").click(function () {
                document.getElementById("container--2")
                $('#container--2').addClass('hidden')
                document.getElementById("container--3").style.marginLeft = "0px";
                document.getElementById("container--1")
                $('#container--1').removeClass('hidden')
                document.getElementById("container--1").style.marginLeft = "325px";
            })

            //fade out and slide frames 3 and 1
            $("button.thirdClick").click(function () {
                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 = "325px";
            })
        });

        .carousel__wrapper {
            height: 200px;
            overflow: hidden;
            position: relative;
            width: 650px;
        }

        .carousel__frame--1 {
            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear;
        }

        .carousel__frame--1.hidden {
            -moz-opacity: 0;
            opacity: 0;
            -moz-transform: scale(0.01);
            -webkit-transform: scale(0.01);
            -o-transform: scale(0.01);
            -ms-transform: scale(0.01);
            transform: scale(0.01);
        }

        .carousel__frame--2 {
            margin-left: 325px;

            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear;
        }

        .carousel__frame--2.hidden {
            -moz-opacity: 0;
            opacity: 0;
            -moz-transform: scale(0.01);
            -webkit-transform: scale(0.01);
            -o-transform: scale(0.01);
            -ms-transform: scale(0.01);
            transform: scale(0.01);
        }

        .carousel__frame--3 {
            margin-left: 650px;

            -webkit-transition: all 300ms linear;
            -moz-transition: all 300ms linear;
            -ms-transition: all 300ms linear;
            -o-transition: all 300ms linear;
            transition: all 300ms linear;
        }

        .carousel__frame--3.hidden {
            -moz-opacity: 0;
            opacity: 0;
            -moz-transform: scale(0.01);
            -webkit-transform: scale(0.01);
            -o-transform: scale(0.01);
            -ms-transform: scale(0.01);
            transform: scale(0.01);
        }

        .carousel__frame--1,
        .carousel__frame--2,
        .carousel__frame--3 {
            position: absolute;
        }

        .carousel__canvas--1 {
            background: #555555;
            color: #ffffff;
            height: 200px;
            width: 300px;
        }

        .carousel__canvas--2 {
            background: #333333;
            color: #ffffff;
            height: 200px;
            width: 300px;
        }

        .carousel__canvas--3 {
            background: #111;
            color: #ffffff;
            height: 200px;
            width: 300px;
        }

        .carousel__trigger-wrapper {
            position: relative;
            width: 100%;
            display: block;
        }

    <div class="carousel__wrapper">
        <div id="container--1" class="carousel__frame--1">
            <div class="carousel__canvas--1">1</div>
        </div>
        <div id="container--2" class="carousel__frame--2">
            <div class="carousel__canvas--2">2</div>
        </div>
        <div id="container--3" class="carousel__frame--3">
            <div class="carousel__canvas--3">3</div>
        </div>
    </div>
    <!-- trigger the animation -->
    <div class="carousel__trigger-wrapper">
        <button id="carousel__click" class="carousel__trigger">
            click
        </button>
    </div>

Answer 1

我通过将它们全部包装在if / else语句中来修复它。这是updated jsfiddle

这是更新的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');
        }

    });

Answer 2

我刚刚更新了您的jsfiddle 使用通用功能

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'));
                 }       
});

无限的JavaScript库功能

2 个答案: