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

Posted 2023-05-09

【中文标题】在一个简单的 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

【发布时间】：2013-12-01 04:54:57

【问题描述】：

我正在开发我的移动产品组合 (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：滑动是一种触摸界面，几乎不能在鼠标上使用，尤其是因为所有内容都与灯箱相关联。如果您使用触控设备，则没有这个问题。

【问题讨论】：

好问题。不幸的是，它读起来很长，不允许我们进行实验。您应该创建一个fiddle 来重现该问题。之后得到的答案的质量和数量都会让您感到惊讶。

k，我在您的网站上玩了一下（我不喜欢目前的界面，很难理解发生了什么；如果我单击主要区域，我花了一些时间才弄清楚你有按钮可以打开和返回，但让我们把它放在一边）。当您到达第一张或最后一张幻灯片时，您不能只禁用相应的按钮吗？

另外，您真正关注的是什么事件 - 左右滑动或上下滑动？您提供的代码两者都有。

这是一个 jsfiddle：jsfiddle.net/v4b8S。事件是什么并不重要，问题不在于事件，所以我为小提琴点击和双击制作了事件。我在向左/向右和向上/向下滑动并单击（在按钮上）之后，因为无论用户以哪种方式直观地交互，我都希望它能够工作。滑动是一个触摸界面，几乎不能在鼠标上使用，特别是因为所有内容都与灯箱相关联，所以我对界面混乱和困难并不感到惊讶。如果您使用触控设备，则没有这个问题。

是的，在触控设备上调试是个问题。所以，我继续使用我的笔记本电脑和台式机。让我看看你的小提琴。与此同时，你还没有回答我的问题。

【参考方案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");
    
);

更新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>

【讨论】：

谢谢！我现在正在尝试！

@user2270306 - 我已经更新了代码和小提琴的链接。请看一看。

你给我的前向翻转代码可以完美运行，并且通过一些调整后向翻转代码可以在 JSfiddle 上运行，但在我的网站上它没有，即使进行了调整。通过将 $this 更改为 .main 并切换顺序，我得到了在 jsfiddle 上工作的后向代码。这是工作小提琴：jsfiddle.net/v4b8S/8。我也在我的网站上更新了代码，但是如果你去你会发现向后翻转是不可能的（你可以使用向上/向下滑动的按钮）。 .main 类都消失了，节目也没有运行。有任何想法吗？这不是一个复杂的网站...

@user2270306 - 现在对我来说已经很晚了。你为什么不继续使用这段代码，我向你保证我们明天就会让它工作。同时，如果您接受这个答案，我会很高兴。反正讨论帖已经很长了。

顺便说一句，您的用户界面现在看起来不错！出于某种原因，我无法通过第四张幻灯片。看起来您现在正在积极地在网站上工作。