Question

我一直在试验我在以下链接中找到的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.aspx页面中我的default.js文件中的代码引用：

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

提前感谢您的亲切问候 _geoNeo

Answer 1

将代码包装在就绪函数中：

    $(function() {

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

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

    });

在http://jsfiddle.net/P3fEp/

工作jsFiddle

Answer 2

将您的整个代码包裹在

中

$(document).ready(function(){

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

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

});

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

2 个答案: