0

我正在尝试用 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，因此我不知道该怎么做）？

4

1 回答 1

0

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

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

或从此处找到的此链接添加缓动库

于 2013-03-15T14:06:36.130 回答