编写一个 JQuery/Javascript 淡入淡出函数答案

【问题标题】：Writing a JQuery/Javascript fading function编写一个 JQuery/Javascript 淡入淡出函数
【发布时间】：2013-02-18 01:46:32
【问题描述】：

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

【问题讨论】：

所以您希望我们为您编写一个自定义滑块插件？
如果这些对one和two有帮助。

标签： javascript jquery

【解决方案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 及以下）来修复

【讨论】：