如何为此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，那么它会变得有点复杂。您需要与旧版浏览器兼容吗？

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