0

首先让我说我是 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）当页面加载时，第一张幻灯片正在显示。我如何禁用用户单击左侧的功能，因为我们在第一张幻灯片上，我该如何为最后一张幻灯片做同样的事情，因为没有幻灯片，所以不能点击下一个按钮显示？

你能帮助我朝着正确的方向前进吗？

4

2 回答 2

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/

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

于 2013-07-14T21:56:26.160 回答
1

第1部分

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

第2部分

您可以使用jQuery UI 按钮执行此操作：

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

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

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

于 2013-07-14T22:13:13.947 回答