循環jquery幻燈片

Question

我知道如何製作幻燈片，雖然我不知道如何使它連續運行而不是一次，但我還沒有製作幻燈片，所以無法顯示任何代碼，但是我知道，我將使用一個<ul>一個div裏面有overflow: hidden;然後使用上慄項目的絕對位置，使它們堆疊在彼此

我雖然使用jQuery的頂部時的項目變化的不透明度，然後如果不透明度爲0，那麼重做這樣的循環。如何將這項被編碼

我更希望不必依傍的插件，其他人也犯提前

Answer 1

謝謝你既然知道怎樣製作幻燈片，我就會放棄你爲循環部分代碼：

var images = new Array("image1.jpg", "image2.jpg", etc.) 
var index = 0; 

// Visually clearer method (my opinion) 
function changeImage() { 
    index++; 
    if (index == images.length) index = 0; // Avoid going out of range 

    $("#imageElement").attr("src", images[index]); 
} 

setInterval("changeImage()", 5000); 

// More concise method 
setInterval(function() { 
    index++; 
    if (index == images.length) index = 0; 
    $("#imageElement").attr("src", images[index]); 
}, 5000); 

如果你想要字幕，我會推薦一個數組「平行」的圖像源數組。

Answer 2

我不確定你想用不透明度做什麼。 你是對Ollie.You必須去與你在你的question.Like描述的類似HTML的結構如下：

<div class="mask"> 
    <ul class="images"> 
    <li style="display: none;"> 
     <img border="0" usemap="#Map" src="images/image.png"> 
    </li> 
    <li style="display: none;"> 
     <img src="images/image1.png"> 
    </li> 
    </ul> 
</div> 
<div class="pagination"> 
    <ul class="triggers"> 
    <li class="">1</li> 
    <li class="">2</li> 
    </ul> 
</div> 

CSS的上述結構是這樣的：

.mask { 
    float: left; 
    height: 156px; 
    margin-top: 10px; 
    overflow: hidden; 
    position: relative; 
    width: 822px; 
} 
ul.images { 
    left: 0; 
    position: relative; 
    top: 0; 
} 
ul.images li { 
    left: 0; 
    position: absolute; 
    top: 0; 
} 
ul.triggers { 
    left: 870px; 
    list-style: none outside none; 
    top: 250px; 
} 
ul.triggers li { 
    background-color: #000000; 
    color: #FFFFFF; 
    cursor: pointer; 
    float: left; 
    font: bold 10px arial; 
    margin: 0 3px; 
    padding: 2px; 
} 
ul.triggers li.selected { 
    background-color: #FFFFFF; 
    color: #000000; 
} 

一些腳本這使得這項工作作爲幻燈片放映會是這樣：

$(document).ready(function(){ 
var triggers = $('ul.triggers li'); 
var images = $('ul.images li'); 
var lastElem = triggers.length-1; 
var target; 
triggers.first().addClass('selected'); 
images.hide().first().show(); 
function sliderResponse(target) { 
images.fadeOut(300).eq(target).fadeIn(300); 
triggers.removeClass('selected').eq(target).addClass('selected'); 
} 
triggers.click(function() { 
if (!$(this).hasClass('selected')) { 
target = $(this).index(); 
sliderResponse(target); 
resetTiming(); 
} 
}); 
function sliderTiming() { 
target = $('ul.triggers li.selected').index(); 
if (target === lastElem) { target = 0; } 
else { target = target+1; } 
sliderResponse(target); 
} 
var timingRun = setInterval(function() { sliderTiming(); },5000); 
function resetTiming() { 
clearInterval(timingRun); 
timingRun = setInterval(function() { sliderTiming(); },5000); 
} 
}); 

可以增加/改變5000爲其他值減少的時間間隔。