0

いくつかの画像とそれに対応する画像名があります。画像と対応する画像名 (css プロパティ) の両方を一定の時間間隔で同時に変更したい (画像のフェードイン/フェードアウト)。私のhtmlコード:

<div id="s_links">
<ul class="s_list">
    <li class="home_p"><a class="lists1">img1 name</a></li>
    <li class="home_p"><a class="lists2">img2 name</a></li>
    <li class="home_p"><a class="lists3">img3 name</a></li>
    <li class="home_p"><a class="lists4">img4 name</a></li>
    <li class="home_p"><a class="lists5">img5 name!</a></li>
</ul>
</div>

<div id="slideshow">
   <img  class="one" src="img1">
   <img  class="two" src="img2">
   <img  class="three" src="img3">
   <img  class="four" src="img4">
   <img  class="five" src="img5">
</div>

たとえば、現在の画像が 'img3' の場合、css は :-

jQuery(".lists3").css({
    "background-color": "#677FC6",
    "border": "1px solid #677FC6",
    "border-radius": "6px"
});
jQuery(".lists1,.lists2, .lists4,.lists5").css({
    "background": "none",
    "border": "none",
    "color": "#000"
});

助けてください...ありがとう

私はこのコードを試してみましたが、画像は完全に機能していますが、cssは変更できません

$(function() {
    var current = 0;
$imgs = jQuery('#header .abc71');
    imgAmount = $imgs.length;
    $($imgs.css('position', 'absolute').hide().get(0)).show();
    window.setInterval(swapImages, 4000);

    function swapImages() {
        var $currentImg = $($imgs[current]);
        if(current == imgAmount-1) current = -1;
        var $nextImg = $($imgs[++current]),
            speed = 1500;
        // animation speed should be the same for both images so we have a smooth change
        $currentImg.fadeOut(speed);
        $nextImg.fadeIn(speed);
    }
});
4

2 に答える 2

1

これを参照してください:サンプル

function swapImages() {
  var $currentImg = $($imgs[current]);
  if(current == imgAmount-1) current = -1;
   var $nextImg = $($imgs[++current]),
    speed = 1500;
   // animation speed should be the same for both images so we have a smooth change
   $currentImg.fadeOut(speed);
   $nextImg.fadeIn(speed);
   $("[class^=lists]").css({"background":"none","border":"none","color":"#000"});
   $(".lists" + ($nextImg.index()+1)).css({"background-color":"#677FC6","border":"1px solid #677FC6","border-radius":"6px"});
}
于 2013-03-19T11:42:17.087 に答える
0

以下を試してみませんか：

  • setTimeout を使用して定期的にトリガーする関数を作成する
  • この関数には、現在の画像のインデックスを表す整数変数があります
  • 関数は現在の画像をフェードアウトし、その名前の CSS プロパティを更新します (現在のコードでは表示されません)。
  • この変数は、関数が呼び出されるたびにインクリメントされます (または、高すぎる場合はゼロに設定されます)。
  • 次に、関数は新しい現在の画像をフェードインし、その名前の CSS プロパティを更新します (現在のコードもそれを示していません)。
  • あなたの機能の終わり
于 2013-03-19T11:35:21.573 に答える