Javascript RAILS/HTML：每7秒更改一次图像幻灯片

我在堆栈中看到了很多像我这样的问题，就像这三个：，和。但我尝试了他们的方法，但没有成功

我正在寻找一种更简单的方法。 在html中使用Javascript内联代码，我试图获得这段代码（我在堆栈中的一个问题中找到了这段代码）

函数FetchData（）{
$（“#pack”）。制作动画({
左：'-1000px'
}“慢”）；
}
setTimeout（FetchData，7000）；

还有这个

<img id="pack" src="image.jpg">

但这似乎不起作用。什么也没发生。我盯着这张照片看了一分钟多，它一点也没动。怎么了？我缺少一些代码吗？顺便说一句，我没有与此相关的css代码。

当你的老师说“分开js和html”，并且你不应该使用内联javascript时，他们可能意味着你应该有如下设置：

在布局中，包括一个javascript文件（默认情况下可能包括该文件）。最好把这些放在底部。如果有一个默认布局，它可能已经有了一个javascript包含的位置

<%= javascript_include_tag "application" %>

---

尝试使用引导使用carousel，并将其放在代码的最顶端：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

以下是html格式幻灯片的代码：

            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#myCarousel">
                    </li>
                    <li data-slide-to="1" data-target="#myCarousel">
                    </li>
                    <li data-slide-to="2" data-target="#myCarousel">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <%= image_tag 'image_1.jpg' %>
                    </div>
                    <div class="item">
                        <%= image_tag 'image_2.jpg' %>
                    </div>
                    <div class="item">
                        <%= image_tag 'image_3.jpg' %>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

这是javascript的内联代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("#myCarousel").carousel({
            interval : 7000,
            pause: false
        });
    });
</script>

$（文档）.ready（函数（）{
$（“我的旋转木马”）。旋转木马({
间隔时间：7000，
暂停：错
});
});

为什么有一位投反对票的人不解释这篇文章为什么值得投反对票？？？我接受否决票，但这需要解释。当你说你不允许使用内联javascript时，这是否意味着你可以在js文件中添加一个javascript include标记？为什么你不被允许——这是你的家庭作业，没有js就可以做吗？@MaxWilliams是的！我们只是被告知要分离js和html。但由于内联代码不起作用，所以当separatedit不起作用时，它也不起作用。什么也不会发生。好像它没有执行。可能是什么问题？请查看chrome调试面板中的“控制台”选项卡，或在您使用的任何浏览器中的等效选项卡。有什么错误吗？我刚刚编辑了我的问题，对控制台进行了一些日志记录，这将有助于调试它。还要注意的是，我不知道您的

animate

调用是否有效-您的问题只是关于如何组织javascript。当您只有一张图像时，为幻灯片设置动画似乎有点奇怪。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

            <div class="carousel slide" id="myCarousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li class="active" data-slide-to="0" data-target="#myCarousel">
                    </li>
                    <li data-slide-to="1" data-target="#myCarousel">
                    </li>
                    <li data-slide-to="2" data-target="#myCarousel">
                    </li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <%= image_tag 'image_1.jpg' %>
                    </div>
                    <div class="item">
                        <%= image_tag 'image_2.jpg' %>
                    </div>
                    <div class="item">
                        <%= image_tag 'image_3.jpg' %>
                    </div>
                </div>
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

<script type="text/javascript">
    $(document).ready(function(){
        $("#myCarousel").carousel({
            interval : 7000,
            pause: false
        });
    });
</script>