Question

首先让我先谈谈我是JQuery的新手，所以我猜测我的方式，这不是理想的，但我会花更多的时间来正确地学习东西。

CODE：

<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使当前内容滑出然后显示下一个？我正在使用display：none;隐藏它们，但是当它显示时如何隐藏当前的隐藏它们。你能帮助我朝着正确的方向前进吗？

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'索引。

同样粗糙的小提琴是：http://jsfiddle.net/vsyg8/3/

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

Answer 2

第1部分

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

第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/ - 尽管动画并不是特别漂亮。

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

2 个答案:

第1部分

第2部分