當滑塊中的圖像處於活動狀態時顯示div

我正在使用插件圖像滑塊，並試圖顯示將與圖像關聯的特定文本。例如，圖片1將顯示段落1，圖片2將顯示段落2等。當滑塊中的圖像處於活動狀態時顯示div

我正要上傳一個片段來顯示我在做什麼，但是插件代碼太多了。因此，這裏是一個jsfiddle鏈接，顯示我在做什麼。有問題的主要代碼位於javascript的底部，我想要顯示的文本位於html的底部。此代碼：

$(document).ready(function() { 
     $('.ma5slider').ma5slider(); 
     var court = $('#slide-1'); 
     var activeSlide = $('.slide--active') == true; 
      if(court == activeSlide) { 
       court.show(); 
      console.log('It is working'); 
       } 
    });

我在頁面加載文本集在display: none;，然後在特定的圖像顯示的是（我相信我這個縮小到類.slide--active），文本設置爲show()。

有沒有人看到我做錯了什麼？

來源

2017-10-06 Paul

這是因爲你沒有目標時，每一張幻燈片按順序排隊要在幻燈片右側活動類，我已經修改了下面的代碼：

$(document).ready(function() { 
     $('.ma5slider').ma5slider(); 
     var court = $('.slide'); 
     var activeSlideClassName = 'slide--active'; 

     setInterval(function(){ 

      if(court.hasClass(activeSlideClassName)){ 
      console.log('It is working'); 
      } 

     }, 1000); 

});

而且你的幻燈片將需要有一個回調函數來捕捉每當新的幻燈片用武之地。在這種情況下，我已經使用setInterval()監視DOM事件，它是不是最好的解決辦法，但你的想法....

工作代碼here

來源

2017-10-06 01:29:36 Vincent1989

謝謝你。不是所有的幻燈片都會有相同的內容。這就是爲什麼我做了'＃slide-1'，但我只注意到我在'a href'中的自己的html中寫的。有沒有一種方法可以針對每個人'a href'？ – Paul

@Paul你可以嘗試'如果（$（'a'）。attr（'href'）===「你想要的href」）{執行}' –

@paul它可能不是你要求的，它只是固定你的代碼而已https://codepen.io/vincentccw/pen/ZXvPQz，你可以用它爲你的幻燈片添加單獨的標題 – Vincent1989

可以檢查它$('.ma5slider').on('ma5.activeSlide')相同如下： jsfiddle

來源

2017-10-06 02:05:00 Xupitan

當滑塊中的圖像處於活動狀態時顯示div

回答

相關問題