0

以下の画像スライドショー スクリプトは、オプションのアンカー リンクと説明を使用して一連の画像を循環するという点で、意図したとおりに機能します。

フェードイン/アウト効果を追加して、このスクリプトを改善したいと思います。どんな助けでも大歓迎です。

前もって感謝します。

<script language="JavaScript1.2">
  var variableslide = new Array()

  variableslide[0] = ['image1.jpg', 'link here', 'description']
  variableslide[1] = ['image2.jpg', 'link here', 'description']
  variableslide[2] = ['image3.jpg', 'link here', 'description']

  var slidewidth = '600px'
  var slideheight = '250px'
  var slidebgcolor = '#FFFFFF'

  var slidedelay = 3000

  var ie = document.all
  var dom = document.getElementById

  for (i = 0; i < variableslide.length; i++) {
    var cacheimage = new Image()
    cacheimage.src = variableslide[i][0]
  }

  var currentslide = 0

  function rotateimages() {
    contentcontainer = '<center>'
    if (variableslide[currentslide][1] != "")
      contentcontainer += '<a href="' + variableslide[currentslide][1] + '">'
    contentcontainer += '<img src="' + variableslide[currentslide][0] + '" border="0" vspace="3">'
    if (variableslide[currentslide][1] != "")
      contentcontainer += '</a>'
    contentcontainer += '</center>'
    if (variableslide[currentslide][2] != "")
      contentcontainer += variableslide[currentslide][2]

    if (document.layers) {
      crossrotateobj.document.write(contentcontainer)
      crossrotateobj.document.close()
    } else if (ie || dom)
      crossrotateobj.innerHTML = contentcontainer
    if (currentslide == variableslide.length - 1) currentslide = 0
    else currentslide++
      setTimeout("rotateimages()", slidedelay)
  }

  if (ie || dom)
    document.write('<div id="slidedom" style="width:' + slidewidth + ';height:' + slideheight + ';     background-color:' + slidebgcolor + '"></div>')

  function start_slider() {
    crossrotateobj = dom ? document.getElementById("slidedom") : ie ? document.all.slidedom : document.slidensmain.document.slidenssub
    if (document.layers)
      document.slidensmain.visibility = "show"
    rotateimages()
  }

  if (ie || dom)
    start_slider()
  else if (document.layers)
    window.onload = start_slider
</script>
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide>
  <layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer>
</ilayer>
4

2 に答える 2

0

jQueryを使用できますか？それらにはすでにfadeInとfadeOutがあり、さまざまなプロパティを設定できます。1つはミリ秒単位の期間です（持続時間を決定するため）。

http://api.jquery.com/fadeIn/

プレーンJSを使用する必要がある場合は、もう少し複雑になります。古いブラウザと互換性がある必要がありますか？

これを行う最も簡単な方法は、setIntervalを設定してから、不透明度を0に下げることですが、すべてのブラウザ/バージョンが不透明度をサポートしているわけではありません。

于 2013-03-10T15:11:28.870 に答える
0

やりたいことは、プログラムopacityで画像 DOM オブジェクトのプロパティをフェードアウトするように減らし、同時に画像の不透明度を上げてフェードインすることです。

コード スタイルに基づいて、jQUery やその他のフレームワークを使用せずにストレートな JavaScript を使用する例を見つけました - http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation

于 2013-03-10T14:25:55.577 に答える