0

我正在尝试在 Rails 3.2 中实现幻灯片，但没有运气。我尝试按照本教程http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm进行操作，但是由于我是 Rails 和 jQuery 的新手，我完全不知道如何应用命令来调用图像数据库。

因此，如果你们能帮我解决这个问题，我真的很感激。

到目前为止，所有图像（顶部的一个主图像和 4 个小图像（主要的一个 + 3 个其他））都从数据库中调用并正确显示在网页上，但我想对其应用幻灯片来制作它看起来更好。通过将鼠标悬停在下面的较小图像上，它们应显示为顶部的主图片。

这就是我的代码：

应用程序/views/homes/show.html.erb

<div class="homepics"> 
    <div class="homemainpic">
    <%= image_tag "/"+@home.images[0].image_path, :size => "925x600" %>
    </div>
    <ul>
    <% @home.images.each {|image| %>
    <li><%= image_tag "/"+image.image_path, :size => "220x150" %></li>
    <% } %>
    </ul>
</div>

应用程序/资产/javascripts

$(document).ready(function() {

    $(".homemainpic li image_tag").hover(function() {
        $('image_tag').attr('src', $(this).attr('src').replace('image_tag "/"+image.image_path'));
    });

    var imgSwap = [];
        $(".homemainpic li image_tag").each(function() {
            imgURL = this.src.replace('image_tag "/"+image.image_path');
            imgSwap.push(imgURL);
    });

    $(imgSwap).preload();
});

    $.fn.preload = function() {
        this.each(function() {
            $('image_tag "/"+@home.images[0].image_path') [0].src = this;
        });
    };
4

1 回答 1

0

试试这个：

$(".homepics ul img").on('mouseover', function () {
    $('.homemainpic img').attr('src', $(this).attr('src'));
});

小提琴

于 2013-04-08T06:41:15.563 回答