Question

我正在尝试为我的网页制作一个简单的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。

Answer 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

Answer 2

<强> 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);

DEMO

Answer 3

更改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);
});

简单的幻灯片显示无法正常工作

3 个答案:

DEMO