RAILS/HTML:每7秒更改一次图像幻灯片
RAILS/HTML: Change image slide every 7 seconds
我见过很多像我这样的问题,就像这三个:1,2,3。但我试了他们的方法,但没有用。
我正在寻找一种更简单的方法。在html中使用Javascript内联,我试图有这个代码(这是我在堆栈中找到的问题之一)
<script>
function FetchData() {
$("#pack").animate({
left: '-1000px'
}, 'slow');
}
setTimeout(FetchData, 7000); </script>
还有这个…
<img id="pack" src="image.jpg">
,但似乎不工作。什么也没有发生。我盯着这张照片看了一分钟多,它一点也不动。出什么事了?我是否缺少一些代码?顺便说一下,我没有相关的css代码
尝试使用carousel使用bootstrap并将其放在代码的最顶部:
<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>
当你的老师说"把js和html分开",并且你不应该使用内联javascript时,他们可能意味着你应该有这样的设置:
在你的布局中包含一个javascript文件(这可能是默认包含的)。最好把这些放在底部。如果有一个默认的布局,它可能已经有一个地方的javascript包含。
<%= javascript_include_tag "application" %>
在你的视图
<img id="pack" src="image.jpg">
在application.js $(function() {
//run on dom ready
console.log("about to setTimeout");
setTimeout(FetchData, 7000);
console.log("done setTimeout");
});
function FetchData() {
console.log("in FetchData, about to animate, $('#pack').size() = "+$('#pack').size());
$("#pack").animate({
left: '-1000px'
}, 'slow');
}
相关文章:
- Javascript返回值只在循环中返回一次
- Jquery FadeIn FadeOut 只工作一次
- Javascript html每点击一次就会更改url
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- Rails操作只调用一次,但我在ajax中每秒钟都调用一次
- jQuery滚动功能只工作一次
- 刷新导致我的帖子“;张贴“;再一次
- 引导程序崩溃一次只能看到一个
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 加载器组件仅加载一次
- 根据Angular.JS上一次的内容禁用选择
- 寻找一个JS滑块插件,它支持一次显示多张幻灯片,以及不同宽度的幻灯片
- JQuery -幻灯片,图库:顺序加载图片(接下来的五张),而不是一次全部加载
- jQuery多滑动条改变幻灯片在一次
- 一次播放多个幻灯片
- Javascript幻灯片在一次迭代中不显示图像
- Javascript幻灯片显示功能一次打开所有幻灯片
- 循环一次后停止javascript幻灯片放映
- 幻灯片功能循环一次,然后失败
- RAILS/HTML:每7秒更改一次图像幻灯片