如何为这个 Javascript 幻灯片添加淡入淡出效果？

Question

下面的图像幻灯片脚本按预期工作，因为它循环显示带有可选锚链接和描述的图像数组。

现在我想通过添加淡入/淡出效果来改进这个脚本。 任何帮助是极大的赞赏。

先感谢您。

<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>

Answer 1

您想要做的是以编程方式降低图像 DOM 对象的opacity属性以淡出，同时增加图像的不透明度以淡入。您开始图像以 0 不透明度淡入并逐步增加。

我为您找到了一个使用直接 JavaScript 的示例，不使用 jQUEry 或其他基于您的代码风格的框架 - 看看您如何使用http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation

Answer 2

你会使用 jQuery 吗？ 它们已经有fadeIn 和fadeOut，您可以在其中设置各种属性，其中一个是以毫秒为单位的持续时间（以确定它将持续多长时间）。

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

如果你必须使用普通的 JS 那么它会变得有点复杂。 您需要与旧浏览器兼容吗？

最简单的方法是设置间隔，然后将不透明度降低到 0，但并非所有浏览器/版本都支持不透明度。