JQuery - 使用 url 循环多个图像 - JQuery - Cycle multiple images with url

JQuery - Cycle multiple images with url

本文关键字：图像循环 url 使用 JQuery | 更新日期: 2023-09-27

我正在用php渲染一些图像，但我也渲染了a href="" - 图像区域在褪色时会发生变化，但网址是相同的。

如何同时更改网址和图像？

JQuery 循环

jquery Cycle 插件可以循环任何 elment。因此，执行此操作的简单方法是使用超链接包装每个图像：

http://jsfiddle.net/lucuma/MV9S5/

<div id="slideshow">
  <a href="/page/a"><img src="img1.jpg" /></a>
  <a href="/page/b"><img src="img2.jpg" /></a>
  <a href="/page/c"><img src="img3.jpg" /></a>
</div>
$('#slideshow').cycle();

此外，如果您有

要更新的标题位于滑块之外，则可以使用幻灯片属性。您将使用 after 事件。下面的代码在每张幻灯片更改后更新h1的超链接。它将文本设置为幻灯片上 img 的标题。因为我的图像包装在超链接中，所以我需要var $cur = $('img', currSlideElement)这一行才能到达幻灯片的 img 元素。

演示：http://jsfiddle.net/lucuma/dsK9S/2/

<h1 id="title"><a href="#"></a></h1>
<div id="slideshow">
  <a href="/page/a"><img src="img1.jpg" /></a>
  <a href="/page/b"><img src="img2.jpg" /></a>
  <a href="/page/c"><img src="img3.jpg" /></a>
</div>
$('#slideshow').cycle({
    after:function(currSlideElement, nextSlideElement, options, forwardFlag) {
        var $cur = $('img',currSlideElement);
        $('#title a').text($cur.attr('title'));
       $('#title a').attr('href',$cur.attr('src')).text();
    }
});

jQuery solution：

$(yourImage).attr('src', 'newImageUrl');

如果您尝试实现滑块。试试尼沃。