在一个简单的jquery幻灯片放映中，我的班级到达图像的末尾，然后脱离DOM的边缘

Question

我正在开发我的移动产品组合（ http://lehuagray.com/mobile ）。 现在，用户可以通过滑动或使用按钮在我的图像中向前和向后翻转。 当用户翻转时，.main类将从其当前图像中删除，并传输到上一个或下一个图像。 但是，如果用户从第一张幻灯片向后翻转或从最后一张幻灯片向前翻转，则.main没有要传输到的目标。 它掉下了边缘，幻灯片放映停止了。

HTML只是容器内的一系列div。 CSS可能是完全无关紧要的，除了也许我不得不使用z-index来反转幻灯片层（绝对放置和堆叠）的顺序。 这是一个jsfiddle： http : //jsfiddle.net/v4b8S/4/ 。 无论事件是什么都没有关系，问题不在事件中，所以我为jsfiddle提供了一些按钮，以简化操作。

这是我的jQuery代码，它是最基本的，其他所有内容都只是此代码的一种变体：

$( "#rolodexnarrow" ).bind( "swipeleft", function(event) {
 $( this ).hide("blind", function() {
 $ ( this ).removeClass("main").next().addClass("main")
  });
});
$( "#rolodexnarrow" ).bind( "swiperight", function(event) {
  $ ( this ).removeClass("main").prev().addClass("main");
  $( this ).prev().show("blind");
});

我试过一个if语句：

$( "#rolodexnarrow" ).bind( "swipedown", function(event) {
  $( ".main" ).prev().show("blind");    
  if ( $(".main").is("#slide1") == false ){
     $ ( ".main" ).removeClass("main").prev().addClass("main");
  }
});

违反直觉（至少对我而言），这只会使第一张和最后一张幻灯片不再显示/隐藏，并且不再接收.main类，因此我们将第二张和倒数第二张幻灯片卡住了。 我也尝试过使用（“：first”）的if语句。 这显然是一个非常简单的幻灯片放映，我敢肯定有一个简单的解决方案。 我敢肯定，这是其他所有人都知道的解决方法，但是我什至找不到任何东西，因为我什至不知道要寻找什么。

Noe：滑动是触摸界面，几乎不能在鼠标上使用，特别是因为所有内容都与灯箱相关联。 如果使用触摸设备，则不会出现此问题。

Answer 1

在这里，您可以： http : //jsfiddle.net/v4b8S/6/

这是更新的JS代码：

$( ".container" ).bind( "click", function(event) {
    if(!$(".main").is("#slide4")) {
      $( ".main" ).hide("blind", function() {
        $ ( this ).removeClass("main").next().addClass("main");
      });
    }
});
$(".container").on( "dblclick", function(event) {
    if( !$(".main").is("#slide1")) {
        $(".main").prev().show("blind");
        $(".main").removeClass("main").prev().addClass("main");
    }
});

UPDATE1：

另外，请阅读jquery的dblclick事件及其处理。 特别要注意的是，不建议同时为click和dblclick事件添加处理程序，因为首先触发的是高度依赖于浏览器和计算机的。 我想这对您的用例来说不是问题，因为您要将其更改为滑动事件。 （对我来说，我必须使用浏览器控制台手动触发dblclick事件。）

UPDATE2：

dblclick事件处理程序现在也可以正常工作。 我不得不改变那里的事物顺序。

UPDATE3：

直到现在我还没有看到你的小提琴。 基本上，它与上面的代码相同，但是单击前进和后退按钮可以激活它。

 /*code with if statement, if you want to play with that $( ".forward" ).bind( "click", function() { if ( $(".main").is("#slide4") == false ){ $( ".main" ).hide("blind", function() { $ ( this ).removeClass("main").next().addClass("main") }); } }); $( ".backward" ).bind( "click", function() { $( ".main" ).prev().show("blind"); if ( $(".main").is("#slide1") == false ){ $ ( ".main" ).removeClass("main").prev().addClass("main"); } }); */ //simple code $(".forward").click(function() { if (!$(".main").is("#slide4")) { $(".main").hide("blind", function() { $(this).removeClass("main").next().addClass("main"); }); } }); $(".backward").click(function() { if (!$(".main").is("#slide1")) { $(".main").prev().show("blind"); $(".main").removeClass("main").prev().addClass("main"); } }); 

 .container { width: 400px; height: 400px; position: relative; } .slide { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #slide1 { background-color: blue; z-index: 5; } #slide2 { background-color: green; z-index: 4; } #slide3 { background-color: yellow; z-index: 3; } #slide4 { background-color: orange; z-index: 2; } .button { padding: 14px 7px; width: 20%; margin: 20px; display: inline-block; background-color: #ccc; } .main { z-index: 10; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="slide main" id="slide1"></div> <div class="slide" id="slide2"></div> <div class="slide" id="slide3"></div> <div class="slide" id="slide4"></div> </div> <div class="forward button">forward</div> <div class="backward button">backward</div>