如何使这个 JQuery 滑块正确渲染幻灯片？

Question

首先让我说我是 JQuery 的新手，所以我猜测我的方式，这并不理想，但我将投入更多时间正确学习。

代码：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

$(document).ready(function () {
    $(".left_hand_icon").on("click", function () {
        $("#slide1").slideLeftShow();
    });
});
$(document).ready(function () {
    $(".right_hand_icon").on("click", function () {
        $("#slide2").slideRightShow();
    });
});
</script>

HTML：

<div class="navigator">

<div class="left_hand_icon">Left</div>
<div class="right_hand_icon">Right</div>
</div>

<div id="slide1">Slide 1 content</div> <!-- displayed by default and i need to slide this away when the next slide is requested -->
<div id="slide2" style="display:none">Slide 2 content</div>
<div id="slide3" style="display:none">Slide 3 content</div>
<div id="slide4" style="display:none">Slide 4 content</div>

我需要什么帮助？

使用我的 JS：

1) 我如何在单击 left_hand_icon 或 right_hand_icon 时使当前内容滑开然后显示下一个内容？我正在使用显示：无；隐藏它们，但是当它显示时我如何隐藏当前的。你能帮我找到正确的方向吗？

2) 加载页面时，会显示第一张幻灯片。由于我们在第一张幻灯片上，如何禁用用户单击左侧的功能显示？

你能帮我找到正确的方向吗？

Answer 1

为了解决第一个问题，您可以做的是：

• 将所有图片的div元素放在一个父容器元素中，如

<div id="container">
    <div id="slide1">Slide 1 content</div>
    <div id="slide2" style="display:none">...
</div>

• 那么您应该将 CSS 应用到父容器，这将帮助您以适当的内联方式放置给定的元素，并形成一长串图像，而不是一次显示一个。

注意：根据图片内容固定宽度、高度，并将溢出设置为隐藏，使其余图片不显示。

• 接下来您要做的就是使用 jQuery 的 .animate() 方法单击您的图像（左右）并适当地移动 [.active] div 的当前 div，例如。

...
    $('.active').animate({
        left: '-280px';     //or the width + padding/margin of images.
    });

来到第二点，你可以有一个变量来跟踪当前焦点的对象（只是索引），如果索引等于存在的 'div' 元素的数量 [$('div[id*= "slide"]').length] 你可以禁用右键，同样为第 0 个索引留下一个。

Rough Fiddle 同样是：http://jsfiddle.net/vsyg8/3/

希望这会有所帮助，如果我在任何地方出错，请纠正我。

Answer 2

第 1 部分

您已经启动并运行了slideLeftHide 等功能，因此您需要做的就是找出应用它们的方法。例如，您可以将currentSlide 类添加到其中之一，并使用jQuery 中的next() 和prev() DOM 遍历函数移动该类。如果您将所有幻灯片包装在<div id="slides"> 中，那么您可以使用$("#slides .currentSlide") 之类的选择器选择当前幻灯片。

第 2 部分

您可以使用jQuery UI buttons：

$(document).ready(function () {
    $(".left_hand_icon").button().click(function () {
        $("#slide1").slideLeftShow();
    }).button("disable");
});

然后在您想重新启用它时调用$(".left_hand_icon").button("enable")。

这是一个演示整个概念的 jsFiddle：http://jsfiddle.net/g5BA3/5/ - 虽然动画不是特别漂亮。