1

JQuery を使用して画像スライダーを作成しようとしています (これが「正しい」方法であるとアドバイスされています。プロジェクトのルート フォルダーの下に画像を含む以下のコードがありますが、表示されませんか?よくわかりません。なぜ？

<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
    <script src="../App_Themes/Project/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var imgs = [
    'myImage.png'];
        var cnt = imgs.length;

        $(function () {
            setInterval(Slider, 3000);
        });

        function Slider() {
            $('#imageSlide').fadeOut("slow", function () {
                $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
            });
        }
    </script>
</asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img id="imageSlide" alt="" src="" />
    </div>
    <asp:ContentPlaceHolder ID="Content" runat="server">
    </asp:ContentPlaceHolder>
    </form>
</body>
</html>

さらに、矢印で各画像をナビゲートできるようにしたいのですが、それでも正しいパスをたどることができますか?

4

1 に答える 1

1

ページが読み込まれる前に JavaScript が実行されているため、関連付けられている要素がまだ存在していません。$(document).ready()は、ページの読み込みが完了するまで JavaScript の実行を遅らせるために使用するのに適した関数です。

編集: 矢印に関しては、別の質問で詳細を提供することをお勧めします。

EDIT2: JsFiddle の例: http://jsfiddle.net/nTCJp/

    $(document).ready(function() {
    // Handler for .ready() called. 
    var imgs = ['http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif'];
    var cnt = imgs.length;
    setInterval(Slider, 3000);

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
            $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
    }
});
于 2012-11-16T18:38:07.753 に答える