php - JQuery - 使用 url 循环多个图像

Question

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

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

jQuery 循环

Answer 1

jquery Cycle 插件可以循环任何任何元素。所以最简单的方法是用一个超链接包装每个图像：

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();
    }
});
​

Answer 2

jQuery解决方案：

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

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