无限的JavaScript库功能

Question

I have a simple gallery using jQuery which cycles properly only once. I've tried wrapping the whole thing in a function and calling it via an onclick event from the button but that isn't working. It should just be able to loop infinitely by clicking the button.

Here's a jsFiddle , thanks in advance!

Here is the js as well

  $("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

I fixed it by wrapping it all in an if/else statement. Here is the updated jsfiddle

Here's the updated 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

I just updated your jsfiddle to use a generic function

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