1

我一直在试验我在以下链接中找到的 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

4

2 回答 2

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

于 2012-04-24T05:26:34.670 回答
0

将您的整个代码包装在

$(document).ready(function(){

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

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

});
于 2012-04-24T05:24:45.150 回答