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

我想从零开始构建自己的客户滑块，我非常了解jQuery的基础知识。我的第一个jQuery滑块我需要一些建议请

我想要完成的是以下内容：我想建立一个带有评论段落的滑块。我的控制将是“下一个”和“先行”，但我想动态地做到这一点。我不知道自从他们被从数据库中取出后我会有多少段落。所以它可能是1或10，那是我的问题。我设法在click上显示（）和隐藏（）我的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并尝试通过寻找孩子来获得“下一个”会更好吗？目前我脑子已经死了，似乎无法弄清楚如何做到这一点？

在此先感谢

来源

2013-12-17 Ljubisa

你想做什么样的滑块？你能展示一些现场实例吗？ –

下面是示例：想法是一次显示1并隐藏所有剩下的内容。http://jsfiddle.net/theStudent/9G8SH/我可以做到这一点，如果它不是动态加载的...我有一个while循环创建带有来自数据库的所有证明的DIV标签。 – Ljubisa

好了，所以首先有id重塑：数字是无效的HTML，但与现代的浏览器我想这不是一个问题。其次，你不能硬编码那样的东西。这意味着你将不得不为每张幻灯片编写代码，这不仅会让人感到痛苦，而且看起来不太好。在这里，我提出了一个简单的例子为用于查看

DEMO

基本上你建立next和prev用作系统正常工作，具有包含当前幻灯片观看的变量和的数量相等您可以轻松计算出总幻灯片，以便下一个或上一个显示哪个幻灯片。我希望这会有所帮助，并且不要害怕在评论中提出更多问题，我很乐意为您提供帮助。祝你好运！

来源

2013-12-17 11:35:29

TY这正是我想要做的，我知道我不会硬编码的ID它只是为了练习我试图找出功能第一，但在凌晨4:30它的孩子的努力:)。 .. TY太多了，我会努力做到这一点，并希望得到它 – Ljubisa

是的问题，为什么有2倍next.click？ 1是功能和其他一个调用功能？你能给我一个速成课程，为什么？ – Ljubisa

@ LJ-C哦，是的，我想我应该已经给演示添加了评论。那就是在开始时初始化滑块。这也是为什么'visible_slide'设置为'-1'而不是'0'，所以当初始化运行时，值'1'将被添加到'visible_slide'，所以'-1 + 1'等于' 0'，这就是要显示的幻灯片 –

请更改$('#testimonials').ready到$(#testimonials').load（如果你试图触发功能，当一个div被加载）。

Why it is better ?

来源

2013-12-17 11:28:33

我已阅读你的链接谢谢！仍然试图把我的头围绕它。我第一次去欣赏帮助我的努力。谢谢Bala – Ljubisa

@ LJ-C很高兴能帮到你。 php_nub_qq显示的工作是一个值得坚持的工作。 –

试试.....

，而无需使用单独的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

来源

2013-12-17 11:56:58 rynhe

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

回答

相关问题