Javascript 在一个简单的jquery幻灯片中，我的类到达图像的末尾，然后从DOM的边缘跌落

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

HTML只是容器中的一系列div。CSS可能是完全无关紧要的，除了可能我不得不使用z-index来反转幻灯片层的顺序（它们是绝对定位和堆叠的）。下面是一个JSFIDLE:。不管事件是什么，问题不在事件中，所以我给了JSFIDLE一些按钮以方便使用

这是我的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:swipe是一个触摸界面，在鼠标上几乎不起作用，尤其是因为所有东西都链接到灯箱。如果您使用触摸设备，则不会出现该问题。

给您：

以下是更新的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");
    }
});

更新1:

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

更新2:

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

更新3:

直到现在我才看到你的新小提琴。基本上，它与上面的代码相同，但只需单击前进和后退按钮即可激活

/*使用if语句编写代码，如果您想使用该语句
$（“.forward”）.bind（“单击”，函数（）{
如果（$（“.main”）为（“#slide4”）==false）{
$（“.main”）.hide（“盲”，函数（）{
$（this）.removeClass（“main”）.next（）.addClass（“main”）
});
}
});
$（“.backward”）.bind（“单击”，函数（）{
$（“.main”）.prev（）.show（“盲”）；
如果（$（“.main”）为（“#slide1”）==false）{
$（.main”）.removeClass（“main”）.prev（）.addClass（“main”）；
}
});
*/
//简单代码
$（“.forward”）。单击（函数（）{
如果（！$（“.main”）是（“#slide4”））{
$（“.main”）.hide（“盲”，函数（）{
$（this.removeClass（“main”）.next（）.addClass（“main”）；
});
}
});
$（“.backward”）。单击（函数（）{
如果（！$（“.main”）是（“#slide1”））{
$（“.main”）.prev（）.show（“盲”）；
$（.main”）.removeClass（“main”）.prev（）.addClass（“main”）；
}
});
.container{
宽度：400px；
高度：400px；
位置：相对位置；
}
.幻灯片{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
#幻灯片1{
背景颜色：蓝色；
z指数：5；
}
#幻灯片2{
背景颜色：绿色；
z指数：4；
}
#幻灯片3{
背景颜色：黄色；
z指数：3；
}
#幻灯片4{
背景颜色：橙色；
z指数：2；
}
.按钮{
填充：14px 7px；
宽度：20%；
利润率：20px；
显示：内联块；
背景色：#ccc；
}
梅因先生{
z指数：10；
}

向前地
向后
问得好。不幸的是，这本书很长，不允许我们进行实验。您应该创建一个复制问题的方法。在那之后，你会对你得到的答案的质量和数量感到惊讶。k，我对你的网站做了一些游戏（我不喜欢现在的界面，很难理解到底发生了什么；如果我点击主区域，就会出现一个图像幻灯片，我花了一些时间才弄明白你有按钮可以打开和向后翻转，但让我们把它放在一边）。你能不能在到达第一张或最后一张幻灯片时禁用相应的按钮？还有，你真正想要的是什么事件？向左和向右滑动或向上和向下滑动？你提供的代码两者都有。下面是一个JSFIDLE:。不管事件是什么，问题不在事件中，所以我为小提琴单击创建了事件然后双击。我正在完成左/右和上/下滑动，同时单击（按钮上的），因为我希望无论用户以何种方式直观交互，它都能工作。滑动是一个触摸界面，几乎不能在鼠标上工作，特别是因为所有东西都链接到灯箱，所以我对界面混乱和困难并不感到惊讶。如果你使用触摸设备，它就没有问题。是的，在触摸上调试设备是个问题。所以，我一直在使用我的笔记本电脑和台式机。让我看看你的小提琴。与此同时，你还没有回答我的问题。谢谢！我现在正在尝试！@user227036-我已经更新了代码和小提琴的链接。请看一看。你给我的前向翻转代码工作得很好，并且经过一些调整，后向翻转的fliPing代码在JSFIDLE上有效，但在我的网站上不起作用，即使进行了调整。我通过将$this更改为.main并切换顺序，在JSFIDLE上获得了反向代码。下面是工作提琴：。我也在我的网站上更新了代码，但如果你继续，你会看到反向代码