我正在尝试为我的网页制作一个简单的HTML-Javascript幻灯片。它在第一轮正确显示,但在此之后,我在每张图像后空白3秒。
我还在图像分区上方有一个文本,我想用图像更改。该文本也适用于第一轮,但在此之后,它不显示任何文本。文本的划分在那里,但没有显示文本。
我从here的源代码中获取了第一个示例中的代码,并尝试对其进行修改。以下是相关代码。
HTML代码:
<div class="fadeinSpan changingTexts">
<span>Text 1</span>
<span>Text 2</span>
<span>Text 3</span>
</div>
<div class="fadein changingImgsDiv changingImgsHW">
<img src="images/img_1.jpg" class="changingImgs changingImgsHW">
<img src="images/img_2.jpg" class="changingImgs changingImgsHW">
<img src="images/img_3.jpg" class="changingImgs changingImgsHW">
</div>
编辑#1:我在头标记中也有这个链接到jquery。对不起,我忘了提。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
CSS代码
<style>
.fadein { position:relative; }
.fadein img { position:absolute; left:0; top:0; }
.fadelinks, .faderandom { position:relative; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }
.multipleslides { position:relative; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
Javascript代码
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
$(function(){
$('.fadeinSpan span:gt(0)').hide();
setInterval(function(){$('.fadeinSpan :first-child').fadeOut().next('span').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
如何使整个过程正常工作?
编辑#2:我为它创造了一个小提琴,你可以找到它here。
答案 0 :(得分:1)
文字和文字图片被添加到&#39; fadein&#39;,文字应该转到'fadeinSpan&#39;
.appendTo('.fadeinSpan');
<强> Example 强>
要使文本过渡顺利(即不要彼此相邻),您必须应用position:absolute;这样的跨度。
.fadeinSpan > * {
position: absolute;
top: 0;
left: 0;
}
这将使文本&amp;然而,图像重叠,因此轻推图像容器。
.fadein {
position: absolute;
top: 20px;
left: 0;
}
我还建议在跨度中添加背景颜色,这样您就看不到新的颜色了。
.fadeinSpan > * {
position: absolute;
top: 0;
left: 0;
background-color: white;
}
<强> Final example 强>
答案 1 :(得分:0)
<强> CSS 强>
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
JQuery的
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
答案 2 :(得分:0)
更改css
.fadeinSpan span { position:absolute; left:0; top:0; }
.fadein img { position:absolute; left:0; top:10px; }
jquery的
$(function(){
$('.fadeinSpan span:gt(0)').hide();
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
$('.fadeinSpan :first-child').fadeOut().next('span').fadeIn().end().appendTo('.fadeinSpan');
//$( "div:hidden:first" ).fadeIn( "slow" );
}, 1000);
});