Question

我有x3 img标签，我想在幻灯片中显示它们，但不知何故它不能按预期工作。只有fade div的子节点用fadeIn方法重复

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

我想你想在这里选择图像，而不是像这样选择div.fade。

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

Answer 2

首先，在幻灯片中，你的选择器是错误的。您想要定位.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 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 ?
}

简单的jQuery幻灯片只重复一个元素

3 个答案: