循环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为其他值减少的时间间隔。