javascript - 编写 JQuery/Javascript 淡入淡出函数

Question

我正在尝试编写一个函数，该函数能够在单个 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>

Answer 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 可以工作，但图像之间不会褪色
• 由于不支持 opacity，IE8 及更低版本无法运行
• 由于不支持 querySelectorAll，IE7 及更低版本无法运行

最后两种情况可以通过添加合适的filter样式(IE8)和填充querySelectorAll(IE7及以下版本)来修复