jQuery的幻燈片添加具有圖像幻燈片容器

首先講解內容目前的功能：在我的網頁我使用jquery cycle plugin滑動圖像。這完美的作品，但現在我想以添加和文本內滑動每個圖像擴展此功能。內部視圖我有jQuery的幻燈片添加具有圖像幻燈片容器

<div id="background-slides"> 
     <div class="slide"> 
      <img src="/Images/slider/0.jpg" alt="initial image" /> 
     </div> 
</div>

在裏面查看我添加在同一頁幻燈片圖像

<script type='text/javascript'> 
     var backgroundSlides = new Array(); 
     backgroundSlides.push('/Images/slider/1.jpg'); 
     backgroundSlides.push('/Images/slider/2.jpg'); 
     backgroundSlides.push('/Images/slider/3.jpg'); 
</script> 
if ($('#background-slides .slide').length) { 
     $('#background-slides').cycle({ 
      speed: 1000, 
      swipe: true, 
      delay: 2000, 
      timeout: 6000, 
      fx: 'zoom', 
      slides: '.slide', 
      next: '.right', 
      prev: '.left' 
     }); 
     $.each(backgroundSlides, 
       function (intIndex, objValue) { 
        var newSlide = '<div class="slide"><img src="' + objValue + '" /></div>'; 
        $('#background-slides').cycle('add', newSlide); 
       } 
     ); 
    } 
});

我的問題是：如何每張幻燈片更改添加格與相關的一些內容幻燈片，例如幻燈片1上的MSG 1，幻燈片2上的MSG 2等。

來源

2015-12-21 panjo

從我看到'cycle'只適用於圖像。這意味着你不能添加任何內容給他們。您可以使用每個圖像的'：before'和'：after'僞元素，但是存在太多限制，缺點和潛在的瀏覽器不兼容性，因此不是一個好主意。你需要尋找一個動畫的div，而不是圖像，如果這就是你想要的插件。 –

您可以爲CSS添加額外的div樣式，並使用js進行動畫，代碼太長而無法放置，只是爲了幫助你去我已經做了搗鼓你。請看下面的評論中的小提琴示例。

來源

2015-12-21 22:45:52 Franco

這裏是提琴：https://jsfiddle.net/6t0ce4Lb/。請注意，在小提琴插件代碼是在'JavaScript'部分只是爲了使這個工作，但你不需要那裏，因爲你已經擁有它。 – Franco

jQuery的幻燈片添加具有圖像幻燈片容器

回答

相關問題