我的第一个 jQuery 滑块我需要一些建议答案

【问题标题】：my first jQuery slider I need some advice please我的第一个 jQuery 滑块我需要一些建议
【发布时间】：2013-12-17 11:17:51
【问题描述】：

我正在尝试从头开始构建自己的客户滑块，我对 jQuery 有非常非常基础的了解。

我想要完成的是：我想构建一个带有推荐段落的滑块。我的控件将是“下一个”和“上一个”，但是我想动态地执行此操作。我不知道从数据库中取出后我会有多少段。所以它可能是 1 或 10，这是我的问题。我设法在点击时显示（）和隐藏（）我的 div，但仅此而已。

这是我的基本代码：

jQuery

$("#testimonials").ready(function(){

$("#1").show();
$("#2").hide();
$("#3").hide();

  $("#next").click(function(){
     $("#1").hide();
     $("#2").show();
                    });

  $("#prev").click(function(){
     $("#2").hide();
     $("#1").show();
                    });

});

HTML

<div id="testimonials">
   <div id="1" class="active-slide">
       <p>This is paragraph one</p>
   </div>
   <div id="2" class="inactive-slide">
       <p>This is paragraph two</p>
    </div>
    <div id="3" class="inactive-slide">
        <p>This is paragraph three</p>
     </div>
</div>

我愿意接受任何建议，或者如果有人知道一个很好的教程来完成这个。

如果我使用 UL 并尝试通过寻找孩子来获得“下一个”会更好吗？我现在有点脑死，似乎无法弄清楚如何做到这一点？

提前致谢

【问题讨论】：

你想做什么样的滑块？你能举一些活生生的例子吗？
这里是示例：想法是一次显示 1 并隐藏所有其余的 ..jsfiddle.net/theStudent/9G8SH 如果它不是动态加载的，我可以这样做......我有一个 while 循环使用数据库中的所有推荐创建 DIV 标记。

标签： jquery

【解决方案1】：

好吧，首先让ids 成为数字是无效的 html，但对于现代浏览器，我认为这不是问题。其次，您不能对这样的东西进行硬编码。这意味着您必须为每张幻灯片编写代码，这不仅会让人头疼，而且看起来也不好看。这里我放了一个简单的例子供大家查看

DEMO

基本上，您将next 和prev 函数设置为作为一个系统工作，有一个变量包含当前正在查看的幻灯片和幻灯片总数，您可以轻松计算下一张或上一张要显示的幻灯片.我希望这会有所帮助，并且不要害怕在 cmets 中提出更多问题，我很乐意为您提供帮助。祝你好运！

【讨论】：

TY 这正是我想要做的，我知道我不应该对 ID 进行硬编码，这只是为了练习我试图首先弄清楚功能，但在凌晨 4:30它的孩子很难 :)... TY 这么多我会努力解决这个问题，希望能得到它
是的问题，为什么会有 2x next.click ？ 1是函数，另一个调用函数？你能给我一个速成班吗？
@LJ-C 哦，是的，我想我应该在演示中添加 cmets。也就是一开始就初始化滑块。这也是为什么将visible_slide 设置为-1 而不是0 的原因，这样当初始化运行时1 的值将被添加到visible_slide，所以-1+1 等于0 并且是要显示的幻灯片
好的，我现在明白这是有道理的。感谢您的帮助！ :) 所以第一部分将其全部隐藏并将幻灯片设置为 -1，因此当它到达下一个 CALL 时，它将从一个开始。 TY明白了:)
@LJ-C 不客气！您还可以通过多种方式拥有此功能，您可以拥有一个处理初始化的初始化函数，然后您不必调用next，但我认为这是一种更有效的方式。如果我可以使用我已经拥有的并实现我想要的，为什么不使用它，对吧？ :D

【解决方案2】：

请将$('#testimonials').ready 更改为$(#testimonials').load（如果您试图在加载 div 时触发函数）。

Why it is better ?

【讨论】：

我已阅读您的链接，谢谢！仍然试图把我的头缠住。我的第一次去我很感激帮助我的努力。谢谢巴拉
@LJ-C 很高兴我能帮上忙。 php_nub_qq 展示的作品值得坚持。

【解决方案3】：

试试这个.....

不为每个 div 使用单独的ID

jQuery

   $(document).ready(function(){
       function showHide(opt) {
          var current = $(".active-slide");
          var gHelem  = (opt == "next") ? current.next(".testimonials_each") : current.prev(".testimonials_each");
          if(gHelem.length > 0) {
            gHelem.removeClass("inactive-slide").addClass("active-slide");
            current.removeClass("active-slide").addClass("inactive-slide");
          }
       }

      $("#next").click(function(){
          showHide("next");
      });

      $("#prev").click(function(){
         showHide("prev");
      });
   });

css

.inactive-slide {
  display:none;
}

html

<div id="testimonials">
   <div class="testimonials_each active-slide">
       <p>This is paragraph one</p>
   </div>
   <div class="testimonials_each inactive-slide">
       <p>This is paragraph two</p>
    </div>
   <div class="testimonials_each inactive-slide">
        <p>This is paragraph three</p>
   </div>
  <button id="prev">Previous</button>
  <button id="next">Next</button>
</div>

Live Demo

【讨论】：