2

私は一度に1つのdivを表示し、それらを何度もスクロールしようとしています。見つけたフィドルを変更し、フィドルで動作させましたが、何らかの理由で、フィドルを使用して簡単なテストページを実装できません。単にdivをスクロールしません。

これがフィドルです：http：//jsfiddle.net/Twistar/d6nZP/86/

そして、これが私の実装されたコードです：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <script type="text/javascript" src="includes/headers/jquery.min.js"></script>
    <script type="text/javascript">

    function go() {
        var visibleBox = $('#container .boxes:visible');
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) {
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }​
        setInterval(go, 1000);​
    </script>
</head>

<body>
    <div id="container">
        <div class="boxes" style="display:">first box</div>
        <div class="boxes" style="display:none;">second box</div>
        <div class="boxes" style="display:none;">third box</div>
        <div class="boxes" style="display:none;">forth box</div>
    </div>
</body>

誰かが私が間違っていることを教えてもらえますか？

4

4 に答える 4

2

私はおそらく単純化して、次のようなものを使用します：http: //jsbin.com/osepim/1/

$(function() {

  // hide all and show first
  $(".boxes").hide().first().show();

  setInterval(function(){
    moveNext();
  }, 1000);

});

function moveNext() {
  var box = $(".boxes:visible"),
      nextBox = box.next();

  if(nextBox.length === 0)
    nextBox = $(".boxes:first");

  //hide all
  $(".boxes").hide();

  // show next
  nextBox.fadeIn();
}
于 2012-12-20T08:16:59.293 に答える
2

I am guessing that you have a working fiddle but on your local test page its not working

左側のドロップダウンからデフォルトのハンドラーを選択し、jqueryハンドラーがないためにテストページで機能しないため、フィドルは機能します。

理由はyou are missing the document ready handler here：

$(function(){
    setInterval(go, 1000);
});

これと交換してみて、役立つかどうかを確認してください。

于 2012-12-20T08:20:36.630 に答える
2

javascriptsコードをreadyイベントでラップする$(document).ready()か、短いバージョン$()を使用する必要があります。これにより、ページの読み込みが完了したときにのみコードが実行されるため、コードは次のようになります。

$(function(){
   function go() {
        var visibleBox = $('#container .boxes:visible');
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) {
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }​
        setInterval(go, 1000);​

});
于 2012-12-20T08:21:23.973 に答える
1 
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<style type="text/css">.boxes{display:none}</style>
</head>

<body>
<div id="container">
        <div class="boxes">first box</div>
        <div class="boxes">second box</div>
        <div class="boxes">third box</div>
        <div class="boxes">forth box</div>
</div>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript">
    function go() {
        var visibleBox = $('#container .boxes:visible'); // GET THE DIV
        visibleBox.hide();
        var nextToShow = $(visibleBox).next('.boxes:hidden');
        if (nextToShow.length > 0) { // SHOW NEXT ITEM
            nextToShow.show();
        } else {
            $('#container .boxes:hidden:first').show();
        }
        return false;
    }​
    setInterval(go, 1000);​ // MS SECOND OF LOOP
</script>
</body>
</html>
于 2012-12-20T08:11:36.850 に答える