简单的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 ? 
}