我想在jQuery中創建一個非常基本的圖像庫。目標是讓3張圖像以連續順序淡入和淡出。因此,圖像1顯示,淡入圖像2等,然後整個事情再次循環。jQuery圖像循環不顯示任何圖像
我的HTML代碼到目前爲止如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
<style type="text/css">
.slider{
width: 2848px;
height: 2136px;
overflow: hidden;
margin: 30px auto;
}
.slider img{
width:2848px;
height:2136px;
display:none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="Slider2.js"></script>
</head>
<body onload="Slider2"();>
<div class="slider">
<img id="1" src="31.jpg" border="0" alt="city"/>
<img id="2" src="2vrtigo2.jpg" border="0" alt="roof"/>
<img id="3" src="3.jpg" border="0" alt="sea"/>
</div>
</body>
而jQuery代碼如下所示:
function Slider2()
{
var total = $(".slider img").size();
for (i=1; i<=total; i+=1)
{
$(".slider #"+i).fadeIn(600);
$(".slider #"+i).delay(2000).hide;
}}
快速語法筆記,我用我的最後++也嘗試For循環的論點。此代碼的結果是一個空白的白頁。我知道一些HTML正在編譯,因爲巨大的2848x2136 div在瀏覽器上創建了滾動條。
如果有人可以幫助我,那將是極大的讚賞。很顯然,我對網絡編程相對陌生,並且很想深入瞭解爲什麼這種方式不起作用。謝謝!
感謝您的詳細解釋,我已經對我的代碼進行了相關更改,現在它應該能夠正常工作,所以非常感謝您清除它!一個簡短的問題,如果你不介意,乘數是做什麼做這項工作? – Robby
我已經更新了我的答案,並試圖解釋延遲乘數的目的。快樂的編碼。 – WebweaverD
太棒了,非常感謝。你極大地幫助我理解這是如何工作的。 – Robby