多个Jquery滑块在一个页面上

Question

我正在使用jquery插件slides来驱动我的滑块。我想在我的页面上放置3个滑块，只有一个在任何时候显示。我有三个按钮通过滑块循环。以下是我的按钮的HTML和jQuery：

HTML

<ul class="tabs"> 
      <li><a href="#tab1">Slider 1</a></li> 
      <li><a href="#tab2">Slider 2</a></li> 
      <li><a href="#tab3">Slider 3</a></li> 

     </ul> 

JQUERY

$(".tab_content").hide(); 
       $("ul.tabs li:first").addClass("active").show(); 
       $(".tab_content:first").show(); 

       $("ul.tabs li").click(function() { 

        $("ul.tabs li").removeClass("active"); 
        $(this).addClass("active"); 
        $(".tab_content").slideUp(600); 

        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn(3500); 
        return false; 
       }); 

您可以查看页面在这里的工作演示：http://vitaminjdesign.com/example/examples/Standard/index.html

，你可以看，它有效，但不好。隐藏点击每个滑块的jquery可以工作，但我觉得有更好的解决方案。在页面加载时，所有三个滑块都正在加载（两个隐藏）。这是一个好习惯吗？

有没有更好的方式来处理三个滑块比我使用它的方式？或者，您可能有一些提示或技巧可以使这些幻灯片之间更清晰，更好地转换？提前致谢。

Answer 1

使用jQuery的scrollTo导致与下面的jQuery的解决方案：

$('#hero-slider ul a.pita').click(function() { 

       $('#hero-slider ul a').removeClass('activeSlide'); 
       $(this).addClass('activeSlide');  
       $('.maskss').scrollTo($(this).attr('rel'), 500); 
       return false;  

      }); 

视图直播： http://vitaminjdesign.com/example/examples/Standard/index.html

Answer 2

只要不会永久加载，加载隐藏在页面中的内容就相当不错。

但在这种情况下，我可能会考虑使用一个滑块并只需在滑块容器区域内加载图像，点击http://api.jquery.com/load/请注意，您可以通过添加额外元素来加载一个文档内的内容（显示在jquery api页面中） id's。以为我不知道你的滑块如何处理额外的容器。

这样我相信你应该能够使用一个滑块并加载所有图像，而不会混淆滑块，反对加载一个滑块内的所有图像并隐藏这些滑块。