下面是目前为止的代码: jQuery:
我正在尝试创建图像滑块，它可以改变我的网站的主体背景。
我发现，直接改变body的背景不是那么好，所以我寻找另一个解决方案。
然后我发现这个:jQuery动画背景图像淡出
我然后改变了一点，所以，而不是使用img它使用div与背景图像。它工作得很好，但是有件事我不明白。
现在的问题是，当两个图像之间发生过渡时，正文背景会被简单地显示出来，这是我不想要的。
淡出现在工作几乎完美。现在的问题是，如果你离开窗口(通过最小化或改变标签)，当过渡发生时，效果将会混乱。
另一个"问题"是做同样的效果，当点击按钮。而且，当点击按钮1 (再次启动滑块)时，"滑块"应该从开始重新开始，而不仅仅是从它停止的地方。
下面是目前为止的代码: jQuery:
$(window).load(function() {
$('#slider div.bgfade').hide();
$('#slider div.bgfade').first().show();
function anim() {
$("#slider div.bgfade").first().appendTo('#slider').fadeIn(1500, function() {
$("#slider div").first().fadeOut(1500);
});
$set = setTimeout(anim, 3000);
}
anim();
$('span').click(function() {
$('#slider div.bgfade').fadeOut(500);
var count = $(this).index();
clearTimeout($set);
if(count == 0) {
$('#button-images div').fadeOut(500);
anim();
}
else if(count == 1) {
$('#button-images div').fadeOut(1500);
$('#button-images div.image1').fadeIn(1500);
}
else if(count == 2) {
$('#button-images div').fadeOut(1500);
$('#button-images div.image2').fadeIn(1500);
}
else if(count == 3) {
$('#button-images div').fadeOut(1500);
$('#button-images div.image3').fadeIn(1500);
}
});
});
<span>Start Slider again</span>
<span>Button 2</span>
<span>Button 3</span>
<span>Button 4</span>
<div id="slider">
<div class="bgfade" style="background: red;"></div>
<div class="bgfade" style="background: blue;"></div>
<div class="bgfade" style="background: orange;"></div>
</div>
<div id="button-images">
<div class="image1" style="background: green"></div>
<div class="image2" style="background: yellow"></div>
<div class="image3" style="background: pink"></div>
</div>
body {
background: #333;
}
span {
display: inline-block;
height: 30px;
line-height: 30px;
text-align: center;
padding: 0 10px;
background: #FFF;
cursor: pointer;
}
#slider, #button-images {
position:fixed;
z-index:-1;
top:0;
left:0;
}
#slider div.bgfade, #button-images div {
position:fixed;
top:0;
display:none;
width:100%;
height:100%;
z-index:-1;
background-repeat: no-repeat !important;
background-position: center !important;
background-attachment: fixed !important;
background-size: cover !important;
}
Here's a Fiddle Demo
. .为什么要从第二个图像(橙色的那个)开始呢?
谁能帮帮我?:)你的问题是两个幻灯片同时改变不透明度，有一个短暂的时刻，你可以通过它们看到，因此主体背景变得可见。
尝试改变
$("#slider div.bgfade").first().appendTo('#slider').fadeOut(500);
$("#slider div").first().fadeIn(500);
与此部分分开
var fadeout = $("#slider div.bgfade").first().appendTo('#slider');
$("#slider div").first().fadeIn(500, function(){
fadeout.fadeOut(500);
});
在当前幻灯片淡出之前，它会在下一张幻灯片中淡出，因此下一张幻灯片将在当前淡出幻灯片的下方可见，并且您将看到下一张幻灯片而不是主体背景。
更新(主要更改代码使按钮功能)
JS
$(window).load(function () {
//just caching selector results
var slider = $('#slider'),
slides = $('.bgfade', slider),
btnsCntnr = $('#sliderbuttons'),
set;
//assign each slide an id, and for each slide, insert a button for switching to it.
slides.each(function (i) {
var slideid = 'slide' + i;
$(this).attr('id', slideid);
//dynamically create "switch to Slide N" button
btnsCntnr.append($('<span />', {
id: slideid + 'btn',
'class': 'sliderbtn',
'data-slide': slideid /*id of the slide this button switches to*/
}).html('Slide ' + (i + 1)));
});
//fix for "why do it start with the second image (the orange one)?"
slides.hide().first().show();
function anim(slideid) {
var first = $('.bgfade', slider).first();
if (first.attr('id') == slideid) {
//slide is currently visible, so no transition required
loopAnim();
return;
}
//next slide is the slide with specified slideid, otherwise 2nd slide (the one after the visible one)
var next = typeof slideid === 'undefined' ? $(".bgfade:nth-child(2)", slider) : $('#' + slideid, slider),
//current slide is all slides before next slide
current = next.prevAll().appendTo(slider);
next.stop().fadeIn(500, function () {
//only fadeout visible slides
current.filter(function () {
return $(this).is(':visible');
}).stop().fadeOut(500);
});
//set next transition
loopAnim();
}
function loopAnim() {
set = window.setTimeout(anim, 5000);
}
function stopAnim() {
window.clearTimeout(set);
}
function switchSlide(slideid) {
stopAnim();
anim(slideid);
}
$('.sliderbtn').click(function () {
switchSlide($(this).data('slide'));
});
//start slider
loopAnim();
});