1

我正在尝试编写一个函数，该函数将能够在单个 HTML 页面上的多个 div 内淡入/淡出图像。div 中的图像需要同时从每个 div 淡入。然后淡出，然后是 div 中的下一个图像。在每个 div 中创建一个迷你图像旋转演示。

我无法解决这个问题:) 我可以很容易地在没有页面上的功能的情况下实现这一点，但是，我想要一些我可以很容易地在页面上使用尽可能多的 div 重复的东西。有人可以教育我吗:) 提前感谢您的任何建议，我无法在网上找到这个。

例子

function imageRotationFunction(var1, var2, var3) {
   //logic I need help with
}

.

imageRotationFunction(<array of ID's to fade>, <number of seconds to fade in>, <number of seconds between fades>);

HTML 页面有：

<div id='fadein0'>
  <img class='imageRotation' src='someimage0.png'>
  <img class='imageRotation' src='someimage1.png'>
  <img class='imageRotation' src='someimage2.png'>
  <img class='imageRotation' src='someimage3.png'>
</div>

<div id='fadein1'>
  <img class='imageRotation' src='otherimage0.png'>
  <img class='imageRotation' src='otherimage1.png'>
  <img class='imageRotation' src='otherimage2.png'>
  <img class='imageRotation' src='otherimage3.png'>
</div>
4

1 回答 1

1

尝试这样的事情：

HTML：

<div class="fadebox">
  <img src="image0.png" />
  <img src="image1.png" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>
<div class="fadebox">
  <img src="image0.png" />
  <img src="image1.png" />
  <img src="image2.png" />
  <img src="image3.png" />
</div>

CSS：

.fadebox {
    position:relative;
}
.fadebox>img {
    position:absolute;
    left:0; top:0;
    opacity:0;
    transition:opacity 1s linear;
    -webkit-transition:opacity 1s linear;
}
.fadebox>img:first-child {
    position:static;
}

JavaScript：

(function() {
    var divs = document.querySelectorAll(".fadebox"), l = divs.length, i;
    for( i=0; i<l; i++) {
        (function(div) {
            var imgs = div.children, l = imgs.length, i = -1,
                step = function() {
                    if(i > -1) imgs[i].style.opacity = 0;
                    i = (i+1)%l;
                    imgs[i].style.opacity = 1;
                };
            step();
            setInterval(step,5000);
        })(divs[i]);
    }
})();

在上面，1s是发生淡入淡出所需的时间，是淡入淡出5000之间的毫秒数（包括过渡，因此在这种情况下，图像将保持显示 4 秒）

请注意，这仅适用于支持浏览器，如下所示：

  • IE、Chrome 和 Firefox 在其最新版本中应该可以正常工作
  • IE9 工作，但图像之间不褪色
  • IE8及以下因不支持而无法使用opacity
  • IE7及以下因不支持而无法使用querySelectorAll

最后两种情况可以通过添加合适的filter样式（IE8）和匀场querySelectorAll（IE7及以下）来修复

于 2013-02-18T01:57:06.227 回答