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 に答える