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其他任何你想要的页面上。