0

次の小さな問題があります。これはコード全体のほんの一部であり、通常は setInterval(time,function); を介して実行されます。コマンドですが、代わりに「次へ」ボタンを使用して自動スライド画像を置き換えたいのですが、なぜjQueryを使用してそれを

$("#nextBtn").click(nextSlide);

指図 ？ボタンが表示されますが、イベントはありません。jQueryコマンドをJSに入れているのかもしれません

function onLoadWindow(e) {}

jQueryの代わりに

$(document).ready(function() {})

私は最近 JS の基礎の学習を終えたばかりで、その直後に jQ を始めたので、私はまだどちらも初心者ですが、Java のプログラミング経験はある程度あります。構文を混在させるのは初めてです。助けてくれてありがとう！=)

編集 : コード スニペットを完全なコードに置き換えました。いくつかのタグや関連するスタイリングなど、必要のないものを取り出して、スキミングを試みました。しかし、今では、コンソールにテキストを送信するための div ボタンを取得することさえできないようです。そのため、どこかに明らかな「noob」エラーがあると確信しています。人々の時間を「無駄に」して申し訳ありません..

<!DOCTYPE html>
  <html>
           <head>
        <meta charset="UTF-8">
        <title>JS Slideshow</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <style type="text/css">

            .slide {
                height:200px;
                width:320px;
                position:absolute;
                opacity:0;
            }

            img {
                width:100%;
                height:100%;
            }   

            #slideshow {
                position:relative;
            }

            .active {
                opacity:1;
                transition:opacity 1s;
            }

            #nextBtn {
                display:block;
                float:left;
                height:25px;
                width:40px;
                background-color:black;
                margin-top:210px;
            }

        </style>

        <script type="text/javascript">

            window.addEventListener("load",onLoadWindow);

            var active_slide;
            var slides;

            function onLoadWindow(e) {
                var slideShow=document.getElementById("slideshow");
                slides=slideShow.getElementsByTagName("div");
                active_slide=0;

                slides[0].classList.add("active");

                //setInterval(nextSlide,10000);
                $("nextBtn").click(nextSlide);

            }

            function nextSlide () {
                slides[active_slide].classList.remove("active");
                active_slide++;

                active_slide%=3;  

                slides[active_slide].classList.add("active");
            }


        </script>

    </head>

    <body>
        <div id="slideshow">

            <div class="slide">
                <img src="IMG/bridge.jpg" alt="" title="" />
            </div>

            <div class="slide">
                <img src="IMG/leaf.jpg" alt="" title="" />
            </div>

            <div class="slide">
                <img src="IMG/road.jpg" alt="" title="" />
            </div>
</div>
    <div id="nextBtn"></div>

    </body>

</html>
4

1 に答える 1

2

Idを正しく参照するには、実際にはハッシュ記号が欠落しているだけでした..指摘してくれたすべての、そしてもちろんVeXiiに感謝しますx）

于 2013-03-31T19:57:10.807 に答える