不使用像其他背景图片那样的background
我正在使用这种风格
HTML:
<div id="bg">
<img id="bgChange" src="image/image.jpg" />
</div>
CSS:
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg > div {
position: absolute ;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
并使用一种简单的方法来更改图像更改 src
JavaScript:
var imageRotating = document.getElementById("bgChange");
var i = 0;
setInterval(function imageRotator() {
imageRotating.setAttribute("src", "image/image" + ++i + ".jpg");
if (i == 3) { i = -1; }
}, 5000);
我想问的是:
使用 JQuery 如何在脚本中添加 .fadeOut()
?我是 JQuery 的初学者,所以我希望我能得到一些详细的答案。
最佳答案
这是我的做法
HTML
<div id="bg">
<img src="image/image1.jpg" class="shown" />
<img src="image/image2.jpg" />
<img src="image/image3.jpg" />
</div>
CSS:
#bg {
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 200%;
}
#bg img{
position: fixed;
top: 0;
left: 0;
display: none;
width: 300px;
height: 300px;
}
#bg img.shown{
display: block;
}
JavaScript:
setInterval(function imageRotator() { $("#bg img.shown").fadeOut("slow", function(){ $(this).removeClass("shown"); });
if ($("#bg img.shown").next("img").length > 0) // if there is an image after this one
{
$("#bg img.shown").next("img").fadeIn("slow", function(){ $(this).addClass("shown"); });
}
else
{
$("#bg img:first-child").fadeIn("slow", function(){ $(this).addClass("shown"); });
}
}, 2000);
编辑:
做了一些小的修复。这是一个工作 fiddle
你有一些 CSS 规则来管理 #bg
中的 div 但你的 HTML 没有任何
关于javascript - 淡出背景图像改变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27396504/