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

<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
由于不支持querySelectorAll

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

编写JQuery / Javascript淡入淡出函数

1 个答案: