如何使此 JQuery 滑块正确呈现幻灯片? [英] How do I make this JQuery slider render slides properly?

问题描述

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

Let me first begin by saying I am new to JQuery so I am guessing my way through this, which isn't ideal but I am going to invest more time learning stuff properly.

代码:

<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 时让当前内容滑开然后显示下一个内容?我正在使用显示:无；隐藏它们，但是当它显示时我如何隐藏当前的.你能帮我找到正确的方向吗?

1) how can i on clicking left_hand_icon or right_hand_icon make the current content slide away and then show the next one? I am using display:none; to hide them but then how do I hide the current one when it's being displayed. Can you help me head in the right direction with this?

2) 加载页面时，会显示第一张幻灯片.由于我们在第一张幻灯片上，如何禁用用户单击左侧的功能，以及如何对最后一张幻灯片执行相同的操作，因为没有幻灯片到显示?

2) When the page is loaded the first slide is showing. How can I disable the ability for the user to click the left one since we are on the firs slide and how can I do the samething for the last slide where the next button shouldn't be able to be clicked since there is no slide to be shown?

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

Can you help me head in the right direction with this?

推荐答案

第 1 部分

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

Part 1

You already have the slideLeftHide etc. functions up and running, so all you need to do is figure out a way to apply them. You could, for instance, add a currentSlide class to one of them and move that class around using the next() and prev() DOM traversal functions in jQuery. That would let you select the current slide with a selector like $("#slides .currentSlide") if you wrap all your slides in a <div id="slides">.

您可以使用 jQuery UI 按钮:

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

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

and then call $(".left_hand_icon").button("enable") when you want to re-enable it.

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

Here's a jsFiddle demonstrating the whole concept: http://jsfiddle.net/g5BA3/5/ - though the animation isn't particularly pretty.

这篇关于如何使此 JQuery 滑块正确呈现幻灯片?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！