添加翻轉樣式幻燈片

Question

您好我有一個簡單的JavaScript幻燈片，我想知道如何添加幻燈片效果，如淡入淡出幻燈片。這是幻燈片代碼：

var i, imgs, pic; 

function rotate() 
{ 
    pic.src = imgs[i] ; 
    (i === (imgs.length -1)) ? i=0 : i++ ; 
    setTimeout(rotate, 5000); 
} 

function init() 
{ 
    pic = document.getElementById("pic"); 

    imgs = [ "/beta/images/img1.jpg", "/beta/images/img2.jpg", "/beta/images/img3.jpg", "/beta/images/img4.jpg" ] ; 

    var preload= new Array(); 
    for(i=0; i< imgs.length; i++) 
    { 
    preload[ i ] = new Image(); 
    preload[ i ].src = imgs[ i ]; 
    } 

    i=0; 

    rotate(); 
} 
onload=init; 

我試圖改變我的rotate()這樣：

function rotate() 
{ 
    pic.src = imgs[i] ; 
    (i === (imgs.length -1)) ? i=0 : i++ ; 
    setInterval(rotate, 5000); 
    $("#pic").fadeIn().show(10000).fadeOut(); 
} 

，並開始搞亂

Answer 1

檢查：

我創建了一個簡單的幻燈片使用jQuery顯示淡入淡出效果。

HTML代碼

<div id='items'> 
    <div class='item first'>Item 1</div> 
    <div class='item'>Item 2</div> 
    <div class='item'>Item 3</div> 
    <div class='item'>Item 4</div> 
    <div class='item'>Item 5</div> 
</div> 
<ul id='controls'> 
    <li id='prev'>Prev</li> 
    <li id='play'>Play</li> 
    <li id='pause'>Pause</li> 
    <li id='next'>Next</li> 
</ul> 

CSS代碼

#items { 
    position : relative; 
    width : 400px; 
    height : 200px; 
    top : 20px; 
    left : 20px; 
} 
.item { 
    position : absolute; 
    background-color : #eee; 
    border : 1px solid #ccc; 
    width : 398px; 
    height : 198px; 
    display :none; 
    text-align : center; 
    font-size : 72px; 
} 
.first{ 
    display : block; 
} 
#controls { 
    margin-top : 30px; 
} 
li { 
    display : inline-block; 
    padding : 5px; 
    border : 1px solid #ccc; 
    background-color : #eee; 
    cursor : pointer; 
} 
#play { 
    display : none; 
} 

JavaScript代碼

//To store timeout id 
var timeoutId; 

var slideImage = function(step) { 

    if (step == undefined) step = 1; 

    //Clear timeout if any 
    clearTimeout (timeoutId); 

    //Get current image's index 
    var indx = $('.item:visible').index('.item'); 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadeout this item 
     $('.item:visible').fadeOut(); 
    } 

    //Increment for next item 
    indx = indx + step ; 

    //Check bounds for next item 
    if (indx >= $('.item').length) { 
     indx = 0; 
    } else if (indx < 0) { 
     indx = $('.item').length - 1; 
    } 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadein next item 
     $('.item:eq(' + indx + ')').fadeIn(); 
    } 

    //Set Itmeout 
    timeoutId = setTimeout (slideImage, 5000); 
}; 

//Start sliding 
slideImage(0); 

//When clicked on prev 
$('#prev').click(function() { 

    //slideImage with step = -1 
    slideImage (-1); 
}); 

//When clicked on next 
$('#next').click(function() { 

    //slideImage with step = 1 
    slideImage (1); 
}); 

//When clicked on Pause 
$('#pause').click(function() { 

    //Clear timeout 
    clearTimeout (timeoutId);  

    //Hide Pause and show Play 
    $(this).hide(); 
    $('#play').show(); 
}); 

//When clicked on Play 
$('#play').click(function() { 

    //Start slide image 
    slideImage(0); 

    //Hide Play and show Pause 
    $(this).hide(); 
    $('#pause').show();  
});