帶有新jQuery的特色滑塊

我試圖用新的jQuery運行滑塊，因爲像旋轉這樣的函數已被棄用。滑塊工作正常，當頁面上傳，我正在從右側點擊標籤加載圖像。當我點擊選項卡時，當前圖像和當前活動選項卡被刪除，並且新圖像和新活動選項卡正確加載比我稱爲startSlider（）;函數再次，但我失去了我的變量值，所以我的startSlider（）;無需加載圖像和活動標籤背景即可運行。請幫我解決這個問題。這是幻燈片圖像：帶有新jQuery的特色滑塊

，這是我的jQuery代碼：

$(function() { 

    var count = $(".ui-tabs-nav li").length; 
    var slideSpeed = 5000; 
    var fadingSpeed = 300; 
    var i = 1; 
    var $slider = $('#featured'); 

    var interval; 

    function startSlider() { 
     interval = setInterval(function() { 

      $("#fragment-"+i).fadeOut(fadingSpeed, function() { 
       $(this).removeClass("ui-tabs-activated"); 
       $('#nav-fragment-'+i).removeClass("ui-tabs-active"); 

       a = i+1; 

       if (i == count) { 
        a = 1; 
        i = 0; 
      } 

      $('#nav-fragment-'+a).addClass("ui-tabs-active"); 
      $("#fragment-"+a).fadeIn(fadingSpeed, function() { 
       $(this).addClass("ui-tabs-activated"); 
      }); 

      i++; 

      }); 

     }, slideSpeed); // End setInterval function 
    } 

    function stopSlider() { 
     clearInterval(interval); 
    } 

    $('.ui-tabs-nav-item > a').click(function(evt){ 

     evt.preventDefault(); 
     stopSlider(); 
     i = $(this).attr('href'); // href's are values from 1, 2, 3, 4, or 5 
     var id = $(".ui-tabs-active > a").attr('href'); 

     $(".ui-tabs-nav li").removeClass("ui-tabs-active"); // This remove current tab background 
     $("#fragment-"+id).remove(); // This remove div with current image 

     $("#fragment-"+i).fadeIn(fadingSpeed, function() { 
      $(this).addClass("ui-tabs-activated"); // Load new image 
      $('#nav-fragment-'+i).addClass("ui-tabs-active"); // Set active background 
     }); 
     startSlider(); // Start slider again 
    }); 
    startSlider(); 
}); // jQuery function

來源

2016-05-18 Mirsad Batilovic

你有工作演示嗎？或者在jsfiddle上創建一個 – yezzz

這裏是jsfiddle。我沒有上傳拇指圖像。 https://jsfiddle.net/mdLxoe33/ –

這裏更新了拇指圖像：https://jsfiddle.net/mdLxoe33/1/ –

好，startslider（）採用可變i到淡出，並刪除活動類，以及淡入可變a並添加活動類。

點擊後，您將使用變量i進行淡入淡出並添加活動類。變量i是全局的，所以當你重新啓動startslider（）時，它將使用那個i來淡出。

此外，點擊後，你要刪除一個元素，但在你的代碼顯示，我沒有看到任何添加一個新的元素或加載圖像。

來源

2016-05-18 19:44:01 yezzz

我明白哪裏是問題，但我不知道如何組織代碼並解決它。我想在點擊標籤上加載該圖像，然後繼續加載下一張圖片，但新的開始幻燈片寬鬆的價值我和我不能解析它作爲參數，因爲在加載頁面全局變量沒有效果。點擊這裏：https://jsfiddle.net/mdLxoe33/1/ –

看看點擊後會發生什麼：https://jsfiddle.net/mdLxoe33/2/ – yezzz

不要刪除（），加載一個新的圖像，你可以簡單地改變src屬性：$（「＃fragment-」+ id）.children（「img」）。attr（「src」，「http://example.com/img.jpg」）; – yezzz

帶有新jQuery的特色滑塊

回答

相關問題