多個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。以爲我不知道你的滑塊如何處理額外的容器。

這樣我相信你應該能夠使用一個滑塊並加載所有圖像，而不會混淆滑塊，反對加載一個滑塊內的所有圖像並隱藏這些滑塊。