php - JQuery-URLを使用して複数の画像を循環させる

Question

私はphpである程度の画像をレンダリングしていますが、レンダリングしますa href=""-画像領域はフェードすると変化しますが、URLは同じです。

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スライドが変更されるたびに のハイパーリンクを更新します。テキストをスライド上の画像のタイトルに設定します。画像はハイパーリンクでラップされているため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');

スライダーを実装しようとしている場合。nivoを試してください。