0

いくつかの画像があります: 1.png、2.png、3.png。4.png. 5.png、arrow_back.png および arrow_forward.png。これらは assets/images フォルダーにあります。ユーザーが前後の矢印で前後に切り替えることができる画像スライダーを作成しています。私のコードは次のとおりです。

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

ただし、ローカルホストでアプリを起動すると、画像が表示されません-空のボックスだけです。次のような標準のRailsコードを常に使用する必要がありますか?

<%= image_tag "arrow_back.png" %>

このように動作するように jQuery コードを変更するにはどうすればよいですか? ご覧のとおり、「src」属性を使用していますが、これを image_tag で操作する方法がわかりません。助けてくれてありがとう。

4

0 に答える 0