Question

我目前正在尝试制作一个基本的图片幻灯片，但我遇到了一些问题。图像突然改变，然后淡出回到第一张图像。然后，在它们完全循环通过照片之后，它可以正常工作，并且在图像之间简单地消失。在过去的几个小时里，我一直在玩这个，我不确定从哪里开始。我想要的图像就是淡入幻灯片。

这是一个小提琴链接 jsfiddle.net/7knnb92s

脚本

$("#slideshow > div:gt(0)").hide();
setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  2000);

HTML

<center>
<div id="slideshow" class="Photos">
<div>
<img src="Image1.jpg" alt = "Image1" width="1000" height="600">
</div>
<div>
<img src="Image2.jpg" alt = "Image2" width="1000" height="600">
</div>
<div>
<img src="Image3.jpg" alt = "Image3" width="1000" height="600">
</div>
<div>
<img src="Image4.jpg" alt = "Image4" width="1000" height="600">
</div>
</center>

CSS

#slideshow { 
    margin: 50px auto; 
    position: center; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 55px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

Answer 1

检查这个小提琴。它完美无缺。enter code here

var i = 0;
var num = $('#slideshow div').length-1;
$('#slideshow div:eq('+i+')').fadeIn('fast');
setInterval(function () {
    $('#slideshow div:eq('+i+')').fadeOut(1000);
    i = i<num?i+1:0;
     $('#slideshow div:eq('+i+')').fadeIn(1000);
}, 3000);

#slideshow {
    margin: 50px auto;
    position: center;
    width: 240px;
    height: 240px;
    padding: 10px;
    overflow: hidden; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    display:none;
    position: absolute;
    top: 55px;
    left: 10px;
    right: 10px;
    width: 240px;
    height: 240px;
    bottom: 10px;
}

<center>
    <div id="slideshow" class="Photos">
        <div>
            <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1422563_738192282896557_6327050085052054804_n.jpg?oh=ed991fb626a0a2cff6e19cb48955d064&oe=54E2A201&__gda__=1427388096_818ee4b1966fb5ec7f43d51bf02f0b33" alt="Image1" width="1000" height="600">
        </div>
        <div>
            <img src="https://scontent-b-atl.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10383629_738202862895499_6804583242811023005_n.jpg?oh=ed4f54107f44ec1fc588f3659ee3d6a2&oe=55141903" alt="Image2" width="1000" height="600">
        </div>
        <div>
            <img src="https://scontent-b-atl.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/10429225_738197656229353_8756451198102185139_n.jpg?oh=0ef2e3c331300ba3c6dd1194c40d8400&oe=54D5C076" alt="Image3" width="1000" height="600">
        </div>
        <div>
            <img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xfa1/v/t1.0-9/10374994_738202209562231_9201950715066845451_n.jpg?oh=0aaad6132a69d47f75d33eb758605054&oe=54D5E109&__gda__=1427247167_560dc112c3b9ae2cd0c158a3f91556cf" alt="Image4" width="1000" height="600">
        </div>
</div>
</center>

使用jquery制作照片幻灯片

1 个答案: