2

我试图一次显示一个 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

您需要使用 ready 事件包装您的 javascripts 代码$(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 回答