使用JavaScript滚动div_Javascript_Jquery_Html

使用JavaScript滚动div

javascript jquery html

使用JavaScript滚动div,javascript,jquery,html,Javascript,Jquery,Html,我试图一次显示一个div，并在其中反复滚动。我已经修改了一个我发现的小提琴，我让它在小提琴上工作，但由于某些原因，我不能用小提琴实现一个简单的测试页面。它只是不在div中滚动这是小提琴：下面是我的实现代码： <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text

我试图一次显示一个div，并在其中反复滚动。我已经修改了一个我发现的小提琴，我让它在小提琴上工作，但由于某些原因，我不能用小提琴实现一个简单的测试页面。它只是不在div中滚动

这是小提琴：

下面是我的实现代码：

<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>


函数go（）{
var visibleBox=$（“#container.box:visible”）；
visibleBox.hide（）；
var nextToShow=$（visibleBox）.next（'.box:hidden'）；
如果（nextToShow.length>0）{
nextToShow.show（）；
}否则{
$（'#container.box:hidden:first'）.show（）；
}
返回false；
}
设定间隔（go，1000）；
第一箱
第二箱
第三个盒子
第四箱

谁能告诉我我做错了什么吗？


<!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>

.box{显示：无}
第一箱
第二箱
第三个盒子
第四箱
函数go（）{
var visibleBox=$（'#container.box:visible'）；//获取DIV
visibleBox.hide（）；
var nextToShow=$（visibleBox）.next（'.box:hidden'）；
如果（nextToShow.length>0）{//显示下一项
nextToShow.show（）；
}否则{
$（'#container.box:hidden:first'）.show（）；
}
返回false；
}
设定间隔（go，1000）； // 毫秒循环秒数

我可能会简单地说，我会这样说：

我猜你有一把可以工作的小提琴，但在你的本地测试页面上它不工作

您的fiddle可以工作，因为您从左侧下拉列表中选择了默认处理程序，而它在测试页面上不工作，因为缺少jquery处理程序

原因是

此处缺少文档就绪处理程序

：

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

试着用这个替换，看看是否有帮助。

您需要用ready事件

$（document.ready（）

或使用短版本

$（）

包装您的javascripts代码，这只会在页面加载完成后执行代码，因此您的代码应该是这样的

$(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);

});

那么，它在fiddle上工作，而不是在您的页面上？您在自己的页面上导入了jQuery吗？它看起来不像是你的代码中没有包含jQuery。你错过了jQuery。添加这个测试：尝试了你的代码，除了我需要删除的不可见字符，正常工作。。。但是我总是在

$（function（）{…}）中附加间隔行$(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);

});