CSSとjQueryの助けを借りてスライドショーをやろうとしていたので(実際にはチュートリアルから切り取った..)、最後の画像だけが表示され、スライドショーが「回転」していないことに気付きまし
た.cssを持っています:
#home{
color: #e3e3e3;
margin: 0 auto;
height: 30%;
width: 30%;
position: relative;
top: 5%;
opacity: 1;
text-align: justify;}
#slideshow {
margin: 0px auto;
position: relative;
top: 2%;
width: 500px;
height: 350px;
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;}
jQuery :
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$("#slideshow > div:first")
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo("#slideshow");
},3000);
}
およびhtml:
<div id="home">
<div id="slideshow">
<div>
<img src="./images/mulsanne.jpg" title="Black Mulsanne by ProTech" alt="Black Mulsanne" style="height:350px;width=500px"/>
</div>
<div>
<img src="./images/murcielago.jpg" title="Orange Lamborghini Murcielago by ProTech" alt="Orange Murcielago" style="height:350px;width=500px"/>
</div>
<div>
<img src="./images/BrabusK8.jpg" title="Black Brabus K8 by ProTech" alt="Black K8" style="height:350px;width=500px"/>
</div>
<div>
<img src="./images/superleggera.jpg" title="Grey Lamborghini Superleggera by ProTech" alt="Grey Superleggera" style="height:350px;width=500px"/>
</div>
<div>
<img src="./images/slr.jpg" title="Black Mercedes SLR by ProTech" alt="Black SLR" style="height:350px;width=500px"/>
</div>
</div>
<br>
Represented in more than XX countries, and exclusive distributor in Kazakhstan since 2009, ProTech's aim is to offer the best services in terms of car paint protection and windows enhancements, with exclusive Kevlar-coated films with various effects.<br>
Find more about us by clicking on the 2 buttons on the left side of this webpage !
</div>
(テキストの最後の行はスライドショーの下にあります。これは、「#home」という div ID を使用する理由を示すためのものです)
なぜこれが機能しないのですか??