Question

我使用jquery cyclyer使用next和previous按钮在图像之间循环。我骑自行车的照片位于我页面的中心。除了图片之外，还有文字（匹配图片），当图片循环时应该改变。可以看到一个例子here。

我无法在图像上使用alt=''并只显示该文本，因为我希望将一些样式应用于显示文本的div。有没有办法可以使用jQuery来完成这个文本更改？

Answer 1

如果您正在使用jQuery Cycle，则可以使用div或figure将图像和文本全部包装在单个块级容器中;该插件将每个容器视为一个幻灯片。请参阅example（或this example了解Cycle2）。

<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放在您想要的页面上的任何其他位置。

Answer 2

您可以创建一个可能的文本数组，并在文本框中更新文本...

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]);

您可以使用CSS

设置p＃text_box的样式

jQuery循环图像和文本

2 个答案: