0

私はJavascriptが初めてで、画像を使って簡単な「スライドショー」を作ろうとしています。これが私のコードです。動作しません。「非表示」機能を無視して、通常どおり html コードをロードします。

    <script type="text/javascript">
        $(function() {
            var tot = $(".slide").length,
            current = 1

            $(".slide").not(":first").hide()

            $("#next").click(function () {
            if (current+1 > tot) return false

            $(".slide:visible").hide().next().show()
            current++
            })

            $("#prev").click(function () {
            if (current-1 < 1) return false

            $(".slide:visible").hide().prev().show()
                current--
            })
        })​
    </script>

    <div id="slide_container">  
            <div class="slide">
                <p>Step 1 explained</p>
                <img src="images/android.png" border="none"/>
            </div>
            <div class="slide">
                <p>Step 2 Explained</p>
                <img src="images/apple.png" border="none"/>
            </div>
            <div class="slide">
                <p>Step 3 explained</p>
                <img src="images/windows.png" border="none"/>
            </div>
            <div>
                <button id="prev">Prev</button>
                <button id="next">Next</button> 
            </div>
    </div>

ありがとう！

4

2 に答える 2

1

コードを再フォーマットし、わかりやすくするためにいくつかのセミコロンを追加しました;。現在と合計のインデックスも変更しました。すべて問題なく動作しているようです。以下の JavaScript を使用してjsFiddleを作成しました。うまく動作します。これを試してみてください

$(function()
{
    var total = $(".slide").length;
    var current = 0

    $(".slide").not(":first").hide()

    $("#next").click(function ()
    {
        if (current + 1 >= total)
        {
            return false;
        }

        $(".slide:visible").hide().next().show();
        current++
    })

    $("#prev").click(function ()
    {
        if (current <= 0)
        {
            return false;
        }

        $(".slide:visible").hide().prev().show();
        current--;
    });
})​
于 2012-05-25T10:57:05.600 に答える
1

ここで提供したスクリプト ブロックの前に、Jquery リファレンスが追加されていることを願っています。ちょっとした考え。

于 2012-05-25T11:43:07.510 に答える