Ruby On Rails 中带有幻灯片的 jQuery答案

【问题标题】：jQuery with slideshow in Ruby On RailsRuby On Rails 中带有幻灯片的 jQuery
【发布时间】：2013-03-15 12:14:04
【问题描述】：

我正在尝试使用 jQuery 制作幻灯片。 我有一个数组中的照片，但我不知道如何创建幻灯片。我看过 'http://jquery.malsup.com/cycle/' 但我不知道该怎么做。

在视图中>布局>应用程序

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#shuffle').cycle({ 
    fx:     'shuffle', 
    delay:  -4000 
});
});

查看我拥有的照片（但这会一次显示所有照片）：

    <div id="shuffle">
    <% @building.building_photos.each do |photo| %>
      <%= link_to (image_tag (photo.photo.url)), @building %>
    <% end %>

  </div>

更新1（源代码）

<!DOCTYPE html>
<html>
<head>
  <title>Welcome to koshbay</title>
  <link href="/assets/all.css" media="screen" rel="stylesheet" type="text/css" />
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/about.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/addphotos.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/admin.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/buildings.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/contact.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/forrent.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/forsale.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/projectproperties.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/rended.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/rented.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/seeits.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sold.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/soon.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/store.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/application.js?body=1" type="text/javascript"></script>
 <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jrails.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#shuffle').cycle({ 
    fx:     'shuffle', 
    easing: 'easeOutBack', 
    delay:  -4000 
});
});



</script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="hCMHawSL0iZidEaHMt8D7T1YhYAuwpzXCdvtwyHxiC0=" name="csrf-token" />
</head>
<body id="store" >
    <div id="banner" >
     <img alt="Welcome" src="/assets/welcome.jpg" />
     Welcome to KTIMABAY

     </div>

     <div id="side" >     

     <a href="/">Home</a>   <br/>
     <a href="http://www..../faq" >Questions</a><br />
     <a href="/about/index">About</a><br/>
      <a href="/contact/index">Contact</a>  <br/>   

      <a href="/sessions/new">Login</a> <br/>
     <br />


     </div>
     <div id="main" >
     <p id="notice"></p>

<p>
 <div id="shuffle">
      <a href="/buildings/27"><img alt="House-exterior-design-wallpaper-actrists-bollywood" src="/system/building_photos/photos/000/000/017/original/House-exterior-design-wallpaper-actrists-bollywood.jpg?1363274173" /></a>
      <a href="/buildings/27"><img alt="House-interior-design-8" src="/system/building_photos/photos/000/000/018/original/House-Interior-Design-8.jpg?1363274173" /></a>
      <a href="/buildings/27"><img alt="Jesse-james-home-bad-feng-shui-bedroom" src="/system/building_photos/photos/000/000/019/original/jesse-james-home-bad-feng-shui-bedroom.jpg?1363274173" /></a>

  </div>
<p>
  <b>Title:</b>
  lefkeri
</p>

<p>
  <b>Status:</b>
  For Rent
</p>

<p>
  <b>Description:</b>
  2 bedrooms
</p>

<p>
  <b>Price:</b>
   € 500.0
</p>

<form action="/seeits/27?building_id=27" class="button_to" method="post"><div><input type="submit" value="I want to see it" /><input name="authenticity_token" type="hidden" value="hCMHawSL0iZidEaHMt8D7T1YhYAuwpzXCdvtwyHxiC0=" /></div></form>

 </div>
 </body>
 </html>

关于我如何做到这一点的任何想法（我第一次必须使用 jQuery，因此我不知道该怎么做）？

【问题讨论】：

如果你通过malsup查看cycle上的源代码，你会看到它只是一个名为slideshow的div id，它包裹着一堆img标签，在你的javascript中你只需像这样@ 987654326@ 这是它的基本工作方式。所以你想一次显示所有照片
我更新了我的问题。我已经完成了这些，但没有任何改变。
我在 jquery lib 文件下方的脚本标签中没有看到循环插件 js 文件
你没有用});关闭你的文档，还要确保你已经连接了缓动插件
删除 easing: 'easeOutBack' 看看这是否有助于添加缓动，可以找到here

标签： jquery css ruby-on-rails ajax

【解决方案1】：

首先添加缺少的}); 用于关闭document ready

接下来在你的循环插件调用中删除easing: 'easeOutBack'

或从here这个链接添加缓动库

【讨论】：

我已经改正了，现在问题就像你说的那样有效。谢谢