4

シンプルなスライドショーにsnook.caスクリプトの1 つを使用しています。ここに一言で言えば：

<div class="fadein">
    <img src="banner1.jpg" width="645" height="307"/>
    <img src="banner2.jpg" width="645" height="307"/>
    <img src="banner3.jpg" width="645" height="307"/>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

今、スライドショーでこれらの画像をクリックできるようにしました。したがって、私のマークアップは次のようになります。

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>

スクリプトを複雑にしすぎずにこの機能を実現するにはどうすればよいですか。タグは私に提供されており、私はそれを制御できないことに注意してください.<img/>

4

3 に答える 3

2

CrazyJugglerDrummerの試みから作業している場合は、 asではなくsを非表示にしてから循環させたいと思うでしょうimg。next('img')それ以外の場合は、それが存在しない場所を探します。

updateCSSとjsが混在しているようです。私は今それを次のように機能させています：

<div class="fadein">
  <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307"/></a>
  <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
  <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
$(function(){
    $('.fadein a:gt(0)').hide();
setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

CSSを使用

.fadein { position:relative; width:645px; height:307px; }
.fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
img { border:0; display:block; }

アンカーと画像がブロックで表示されていること、およびアンカーに絶対位置が設定されていることを確認する必要があります。また:first-child、画像が薄くならないようにさらに指定する必要があります。

1.3.2jQueryとXHTMLStrictを使用してさらに更新します。FF、IE6-8、Safari、Chrome、Operaで動作します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  .fadein { position:relative; width:645px; height:307px; }
  .fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
  img { border:0; display:block; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
  $('.fadein a:gt(0)').hide();
  setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>
</head>
<body>
  <div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307" alt="1" /></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307" alt="2" /></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307" alt="3" /></a>
  </div>
</body>
</html>
于 2010-03-03T00:54:42.097 に答える
1

画像をアンカー タグでラップしますか? アンカーはどこから来るのですか？それらを配列内に配置すると仮定します。

var link = ['www.example.com', 'www.example.net'];
$("div.fadein > img").each(function(i) {
    var $anchor = $("<a></a>").attr("href", link[i]); // or $(this).attr("src") depending on what you mean
    $(this).wrap($anchor);
});

または、質問を完全に誤解していますか？それらをクリック可能にする必要がある場合は、それぞれにクリックハンドラーを割り当てるだけではいけません。つまり、次のようになります。

$("div.fadein > img").click(function() {
   window.location.href = $(this).attr("src"); // assuming the href is the images source
});

また：

var link = ['www.example.com', 'www.example.net'];
$("div.fadein > img").each(function(i) {
    $(this).click(function() {
        window.location.href = link[i];
    });
});

上記の例では、画像と同じ数のリンクがあり、それらが正しい順序であると仮定していることに注意してください。

于 2010-03-03T00:14:48.823 に答える
0

「fadein」で HTML を編集できる場合は、リストしたものに変更すると機能するはずです。

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

最初の子を選択してフェードします。これは現在<a>です。画像だけをフェードインしたとしても、それらが s の中にある限り<a>、リンクはたどられます。

于 2010-03-03T00:05:30.137 に答える