0


0

背景スライドショー-Jquery

私は、その上にリンクを持ちながら、バックグラウンドでDIVで実行されるスライドショーを作成しようとしています。 私が直面している問題は、fadeInおよびfadeOut JQuery関数を使用して画像を切り替えているときに、リンクもフェードアウトしていることです。 背景画像のみをフェードする方法はありますか? 私のコードは以下の通りです。

var bgimage=new Array()
  bgimage[0] = 'bg_pic2.jpg';
  bgimage[1] = 'bg_pic3.jpg';
  bgimage[2] = 'bg_pic4.jpg';
  bgimage[3] = 'cbg_pic5.jpg';
  bgimage[4] = 'bg_pic1.jpg';

  var abc=-1

  function t()
  {
    if (abc<bgimage.length-1)
 {
   abc++;
 }
 else
 {
   abc=0;
 }
    document.getElementById("mainpic").style.backgroundImage = 'url("'+bgimage[abc]+'")';
 $('#mainpic').fadeIn();
 $('#mainpic').delay(3900).fadeOut();

  }
          window.onload = load;

  function load()
  {
 $('#mainpic').hide();
    $('#mainpic').delay(500).fadeIn();
  document.getElementById("mainpic").style.backgroundImage =     'url(css/images/bg_pic1.jpg)';
    setInterval("t()",5000); //change every 4 seconds, can be changed.
 $('#mainpic').delay(3600).fadeOut();
  }


//-->

2 Answer


0


テキストを画像とは別のDIVに配置すると、必要な効果を得ることができます。 そうすれば、画像divをフェードアウトしても、テキストはフェードアウトしません。 +テキストと画像を含むdivは、2つの子divが絶対位置を持つ相対的な位置にある必要があります。 テキストdivは、画像divよりも高いz-indexを持つ必要があります。これは、テキストが画像の上にあることを確認するためです。

次のようにしてください。


画像divの幅を調整したことに注意してください。 おそらく、画像の実際の幅に設定する必要があります。


0


これをFirefoxとChromeで動作させることができましたが、IEは画像を右方向に押し出しました。 . .