Question

所以我有3张图片我想作为背景替代，这是我在头部写的代码，它似乎没有用：

application.html.erb

<script>                                                                                                                                                  
var myImage = document.querySelectorAll(“.top-section neutral”);                                                                                              
var imageArray = ["../assets/images/background-girls.png”, “../assets/images/background-guys-game.png”, “../assets/images/background-neutral.png”];           
var imageIndex = 0;                                                                                                                                           
function changeImage () {                                                                                                                                     
    myImage.setAttribute(“src”, imageArray[imageIndex]);                                                                                                      
    imageIndex++;                                                                                                                                             
    if (imageIndex >= imageArray.length) {                                                                                                                    
    imageIndex = 0;                                                                                                                                           
    }                                                                                                                                                         
}                                                                                                                                                             

window.onload = function () {                                                                                                                                 
    setInterval(changeImage, 5000);                                                                                                                           

}                                                                                                                                                             
  </script>

作为一个Ruby人，我是JS的新手，所以感谢先进。

Answer 1

如果有错误，你会得到什么错误？

有多少图像匹配“.top-section neutral”？

此阵列中的图像也需要加载。更不用说可能无法在window.onload上加载的img元素本身。

更常见的做法是使用css可以看到三个图像和替代图像。

编辑：

您可能会执行以下操作：

<% @images.each do |image_src| %>
  <%= image_tag( image_src, class: "hidden rotate") %>
<% end %>

然后你可以确保你的css中的某个地方有像

这样的东西

.hidden {
  display:none;
}

然后你可以使用你的javascript来交替哪个.rotate图像也不是.hidden。

查看jquery的.addClass / .removeClass方法。还有：nth-of-type（x）

至于交替索引，有很多方法。

Answer 2

您可以尝试的一件事是使用asset tag helpers中的image_path而不是使用当前资产路径，所以

var imageArray = ["<%= image_path('background-girls.png' %>", “<%= image_path('background-guys-game.png' %>", “<%= image_path('background-neutral.png' %>"];

也许这会解决你的错误

希望有所帮助

Answer 3

看起来你的imageArray中有不同的引号（“与更弯曲的版本相比），这可能会使你的程序无法正确关闭字符串。”

使用/ js在rails中旋转背景

3 个答案: