0

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

我不能alt=''在图像上使用而只显示该文本，因为我希望将一些样式应用于div显示文本的位置。有没有办法使用 jQuery 来完成这种文本更改？

4

2 回答 2

0

如果您使用 jQuery Cycle，您可以使用divs 或figures 将图像和文本全部包装在一个块级容器中；该插件会将每个容器视为一张幻灯片。请参阅示例（或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放置在您想要的页面上的任何其他位置。

于 2013-03-08T15:20:49.587 回答
0

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

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 的样式

于 2013-03-08T15:22:12.390 回答