jQuery Cycle圖像和文本

Question

我正在使用jquery cyclyer在圖像之間循環使用next和previous按鈕。我騎自行車的照片位於我的頁面中央。除了圖片之外，還有文字（與圖片相匹配）在圖片循環時應該改變。一個例子可以看到here。

我不能在圖像上使用alt=''，只顯示該文本，因爲我想將某些樣式應用於顯示文本的div。有沒有辦法使用jQuery來完成文本更改？

Answer 1

你能創建的文本的數組，並更新文本框中的文本...

var textArray = []; 
textArray[0] = "This is the text for the first image"; 
textArray[1] = "This is the text for the second image"; 
textArray[2] = "This is the text for the third image"; 

然後給每個圖像像一個唯一的標識符：

<img id="image_0" src="picture1.jpg" /> 
<img id="image_1" src="picture2.jpg" /> 
<img id="image_2" src="picture3.jpg" /> 

而當圖像循環，做一個簡單的查找和替換

//get the identifier from the image ID, assuming that 'this' 
//refers to the image you just cycled 

    var text_index = this.id.replace('image_',''); 

    $("p#text_box").html(textArray[text_index]); 

你可以風格p＃text_box，但你喜歡與CSS

Answer 2

如果您使用的是jQuery Cycle，則可以使用div s或figure s將圖像和文本全部封裝在一個塊級容器中;該插件會將每個容器視爲一張幻燈片。請參閱example（或Cycle2的this example）。

<div id="slideshow2" class="pics"> 
    <figure> 
     <a href="images/1.jpg" rel="lightbox"><img src="images/1m.jpg"></a> 
     <figcaption>Text text text text</figcaption> 
    </figure> 
    <figure> 
     <a href="images/2.jpg" rel="lightbox"><img src="images/2m.jpg"></a> 
     <figcaption>Text text text text</figcaption> 
    </figure> 
    <figure> 
     <a href="images/3.jpg" rel="lightbox"><img src="images/3m.jpg"></a> 
     <figcaption>Text text text text</figcaption> 
    </figure> 
</div> 

然後通過使用CSS的定位，你可以把figcaption其他任何你想要的頁面上。