0

我有一些图片：1.png、2.png、3.png。4.png。5.png、arrow_back.png 和 arrow_forward.png。它们位于资产/图像文件夹中。我正在制作一个图像滑块，用户可以在其中使用后退箭头来回切换。我的代码是：

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" type="text/css" href="carousel.css">

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>

<!-- the carousel div, which holds the back and forward arrows on each side, and the 
changing images, in the middle -->
<div id = "carousel">
  <img id ="rotate_images" src="1.png"/>
  <!-- back arrow -->
  <div id = "back">
  <img src = "arrow_back.png">
</div>  
<!-- forward arrow -->
  <div id = "forward">
  <img src = "arrow_forward.png">
</div>

</div>

<script>

$('#back').on({
    'click': function () {
        var origsrc = $(rotate_images).attr('src');
        var src = '';
        if (origsrc == '5.png') src = '4.png';
        if (origsrc == '4.png') src = '3.png';
        if (origsrc == '3.png') src = '2.png';
        if (origsrc == '2.png') src = '1.png';
        if (origsrc == '1.png') src = '1.png';
        $(rotate_images).attr('src', src);
    }
});

$('#forward').on({
    'click': function () {
        var origsrc = $(rotate_images).attr('src');
        var src = '';
        if (origsrc == '1.png') src = '2.png';
        if (origsrc == '2.png') src = '3.png';
        if (origsrc == '3.png') src = '4.png';
        if (origsrc == '4.png') src = '5.png';
        if (origsrc == '5.png') src = '5.png';
        $(rotate_images).attr('src', src);
    }
});
</script>

但是，当我在 localhost 上启动我的应用程序时，我的图像没有出现 - 只是空框。是否真的有必要一直使用标准 Rails 代码，例如：

<%= image_tag "arrow_back.png" %>

如何修改我的 jQuery 代码，使其以这种方式工作？如您所见，它使用了“src”属性，但我不知道如何使用 image_tag。谢谢你的帮助。

4

0 回答 0