我正在尝试编写一个函数,该函数能够在单个 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>
最佳答案
尝试这样的事情:
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及以下版本)来修复
关于javascript - 编写 JQuery/Javascript 淡入淡出函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14928307/