簡單的jQuery幻燈片重複只有一個元素

Question

我有x3 img標籤，我想讓他們在幻燈片中，但不知何故它不能按預期方式工作。只有褪色div的孩子重複與淡入方法

HTML：

<div id="frame"> 
    <div class="imgwrap"> 
    <div class="fade"> 
    <img src="http://i.imgur.com/7zfqoYw.jpg"/> 
    <img src="http://i.imgur.com/Nwz97Qt.jpg"/> 
    <img src="http://i.imgur.com/inXJQNZ.jpg"/> 
    </div> 
    </div> 
</div> 

的Jquery：

$(function SlideShow(){ 
    $('.fade:first-child').appendTo('.fade'); 
    setInterval(function() 
    { 
    $('.fade:first-child').hide().appendTo('.fade').fadeIn(2000).end(); 
    },4000); 
}); 

另外我試圖找到一種方式，這個功能與輸入文本形式相關的內容與幻燈片放在一起。

的JavaScript：

var num=1; 
text1 = "Picture One [TEXT]" 
text2 = "Picture Two [TEXT]" 
text3 = "Picture Three [TEXT]" 

function textSlideShow() 
{ 
num=num+1 
if (num==3) 
{num=1} 
document.joe.burns.value=eval("text"+num) 
} 

的jsfiddle：

http://jsfiddle.net/C3f6J/2/

Answer 1

首先，在你幻燈片，你選擇是錯誤的。您想要定位.fade的第一個孩子。只需添加一個空間：

$('.fade :first-child') 

然後你的CSS過渡將與fadeIn混亂。更具體：

transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out; 
    -webkit-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out; 
    -moz-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out; 
    -o-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out; 
    -ms-transition:width .25s ease-in-out, height .25s ease-in-out, margin .25s ease-in-out; 

的過渡後，打電話給你的文字幻燈片功能：

$('.fade :first-child').appendTo('.fade').hide().fadeIn(2000).end(); 
textSlideShow() 

而且改變你幻燈片功能到：

function textSlideShow() 
{ 
    num=num+1 
    if (num>3) num=1; 
    $('input[NAME=burns]').val(window['text'+num]) 
} 

一切工作正常：http://jsfiddle.net/C3f6J/28/

Answer 2

我想你想在這裏選擇圖像，而不是像這樣div.fade。

$(function SlideShow(){ 
    $('.fade img:first-child').appendTo('.fade'); 
    setInterval(function() 
    { 
    $('.fade img:first-child').hide().appendTo('.fade').fadeIn(2000).end(); 
    },4000); 
}); 

Answer 3

我認爲你試圖去快於這一點：

$('.fade:first-child').hide().appendTo('.fade').fadeIn(2000).end(); 

你沒有選擇的圖像：

$('.fade img:first-child').hide().appendTo('.fade').fadeIn(2000).end(); 

這個工作對我來說更好。此外，你不是要求你的文本功能：

setInterval(function() 
{ 
    $('.fade img:first-child').hide().appendTo('.fade').fadeIn(2000).end(); 
    textSlideShow(); // add this line to update your text 
},4000); 

最後文本函數不正確處理循環：

function textSlideShow() 
{ 
    if (num==3) 
    { 
     num=1; 
    } 
    else{ 
     num=num+1; 
    } 
    document.joe.burns.value=eval("text"+num); // why not a table instead of an eval ? 
}