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

In a simple jquery slide show, my class gets to the end of the images and then falls off the edge of the DOM

本文关键字：然后 图像 边缘 DOM 我的 一个 简单 幻灯片 jquery      更新时间：2023-09-26

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

HTML只是容器中的一系列div。CSS可能完全无关紧要，只是我可能不得不使用z索引来反转幻灯片层的顺序（它们是绝对定位和堆叠的）。这是一个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：滑动是一个触摸界面，在鼠标上几乎不起作用，尤其是因为所有东西都链接到灯箱。如果你使用触摸设备，它就没有这个问题。

开始：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");
    }
});

更新1:

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

更新2:

dblclick事件处理程序现在也运行良好。我不得不改变那里的秩序。

更新3:

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

/*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>

相关文章：