jQuery中的动画在第一个循环中显示错误的图像？

我一直在尝试了一个jQuery脚本，我在下面的链接上找到：jQuery中的动画在第一个循环中显示错误的图像？

http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

的运行实例的工作，但如果我跑我自己的VS 2010项目的代码，由于某种原因，第一图像似乎恢复到自身。

我的意思是这样的：

以下是Default.aspx页面图像：

<div id="slideshow"> 
     <div> 
     <img src="Images/boating.gif" width="240px" height="240px"> 
     </div> 
     <div> 
     <img src="Images/Cat.gif" width="240px" height="240px"> 
     </div> 
     <div> 
     <img src="Images/catcute.jpg" width="240px" height="240px"> 
     </div> 
     <div> 
     <img src="Images/cutebird.jpg" width="240px" height="240px"> 
     </div> 
    </div>

这里是我的Default.js文件中的代码：

$(document).ready(function(){ 

$("#slideshow > div:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 3000); 

});

以下是样式表文件中的代码：

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 

} 

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

这里是我的default.js代码参考在我的Default.aspx页面文件：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    <script src="Default.js" type="text/javascript"></script> 
</asp:Content>

预先感谢您和亲切的问候 _geoNeo

来源

2012-04-24 geoNeo_

您是否将相同的样式添加到您的项目中，无论是在html文件的样式块中还是在链接的样式表中？ – kinakuta 2012-04-24 05:24:41

工作正常：http://jsbin.com/itiwev/edit#javascript,html – Sampson 2012-04-24 05:25:35

我刚刚在网页上向[fiddle]（http://jsfiddle.net/unyQk/）发送了确切的代码，它像广告一样工作。您必须在CSS中丢失某些内容，否则图像的实际代码不正确。发布您的实际代码而不是基本的“img 1”，“img 2”片段。这是你发布的JS以外的东西导致错误 – 2012-04-24 05:29:00

在

$(document).ready(function(){ 

$("#slideshow > div:gt(0)").hide(); 

setInterval(function() { 
    $('#slideshow > div:first') 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .end() 
    .appendTo('#slideshow'); 
}, 3000); 

});

包装你的整个代码

来源

2012-04-24 05:24:45 coolguy

嗨ubercooluk没有尝试，因为保罗建议，并没有运气:( – 2012-04-24 06:28:27

是的，再次尝试它的“可爱的鸟”图像不断上来后，每个图像。所有的图像已经步进槽谷似乎修复本身 - 奇怪 – 2012-04-24 06:31:19

嗨，所有我发现它的概率是在我的jQuery的ubercool - 我只包装这个准备好的函数：$（document）.ready（function（）{ $ （“#slideshow> div：gt（0）”）。hide（）;}）; thanx：D – 2012-04-25 20:52:31

将您的代码包装在一个准备就绪的功能中：

$(function() { 

     $("#slideshow > div:gt(0)").hide(); 

     setInterval(function() { 
      $('#slideshow > div:first') 
      .fadeOut(1000) 
      .next() 
      .fadeIn(1000) 
      .end() 
      .appendTo('#slideshow'); 
     }, 3000); 

    });

工作jsFiddle在http://jsfiddle.net/P3fEp/

来源

2012-04-24 05:26:34

你好保罗我改变了代码，如你所建议的，仍然做同样的事情“可爱的小鸟”图像在每张图像后不断弹出。老实说，不知道做错了什么 – 2012-04-24 06:27:43

jQuery中的动画在第一个循环中显示错误的图像？

回答

相关问题