图片幻灯片不起作用

Question

我跟着这个jsfiddle并创建了我会在主页中看到的幻灯片的图库。 我试图移动到另一个文件，但没有成功。 在jsfiddle里面它工作得很好，但在我的应用程序内失败。 当我检查我是否需要所有这些文件时，它似乎没问题。

我的观点：

<!-- "previous page" action --> 
      <a class="prev browse left"></a> 

      <!-- root element for scrollable --> 
      <div class="scrollable" id=chained> 

      <!-- root element for the items --> 
       <div class="items"> 


      <!-- 1-5 --> 
      <div> 
      <%= link_to image_tag("EMILIANA_BANNERS.png", :width=> '470', :height=> '260') %> 
      <div class="caption-bkgd"></div> 
      <div class="caption">Emiliana Products</div> 
      </div> 

      <div> 
      <%= link_to image_tag("tractors and machinery.png", :width=> '470', :height=> '260') %> 
      <div class="caption-bkgd"></div> 
      <div class="caption">Tractors and machinery</div> 
      </div> 

    <!-- "previous page" action --> 
     <a class="prev browse left"></a> 

     <!-- root element for scrollable --> 
     <div class="scrollable" id=chained> 

     <!-- root element for the items --> 
      <div class="items"> 


     <!-- 1-5 --> 
     <div> 
     <%= link_to image_tag("EMILIANA_BANNERS.png", :width=> '470', :height=> '260') %> 
     <div class="caption-bkgd"></div> 
     <div class="caption">Emiliana Products</div> 
     </div> 

     <div> 
     <%= link_to image_tag("tractors and machinery.png", :width=> '470', :height=> '260') %> 
     <div class="caption-bkgd"></div> 
     <div class="caption">Tractors and machinery</div> 
     </div> 

    </div> 

我内心的js代码

$(document).ready(function() { 
    $("#chained").scrollable({ 
     circular: true, 
     mousewheel: true, 
     onSeek: function() { 
      $('.caption').fadeIn('fast'); 
     }, 
     onBeforeSeek: function() { 
      $('.caption').fadeOut('fast'); 
     } 
    }).navigator().autoscroll({ 
     interval: 6000 
    }); 
}); 

我的CSS文件：

a:active { 
    outline:none; 
} 

:focus { 
    -moz-outline-style:none; 
} 
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
.scrollable { 

    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 470px; 
    height:260px; 
    background-color: #d9d9d9; 

} 

/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set the width and height for the root element and 
    not for this element. 
*/ 
.scrollable .items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
    clear:both; 
    height: 260px; 
} 

.items div { 
    float:left; 
    width:470px; 

} 

/* single scrollable item */ 
.scrollable img { 
    float:left; 
    margin:0; 
    background-color:#fff; 
    width:470px; 
    height:260px; 
    position: relative; 
} 

.scrollable img.hover { 
    background-color:#123;  
} 
.scrollable .caption { 
    color: #fff; 
    position: absolute; bottom: 12px; 
    padding-left: 18px; 
    font: bold 14px arial; 
} 
.scrollable .caption-bkgd { 
    background-color: #000; 
    height: 40px; 
    position: absolute; bottom: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 


/* active item */ 
.scrollable .active { 
    border:2px solid #000; 
    position:relative; 
    cursor:default; 
} 
/* position and dimensions of the navigator */ 
.navi { 
    margin: -26px 0 0 0; 
    position: absolute; left: 400px; 
    width:200px; 
    height:13px; 
    z-index: 9999; 
} 
/* NAVIGATOR */ 
.navi a { 
    width:13px; height:13px; 
    float:left; 
    margin:0 4px; 
    background-color: #d9d9d9; 
    display:block; 
} 

.navi a:hover, .navi a.active {background-color: green;} 

.hide{display: none;} 

我想移动内部查看，但没有更迭代码。

Answer 1

你需要添加这个js：http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js

该滑动使用jQuery 1.4.2检查你的jQuery版本（也是我用1.6.4-1.8.3它的工作..）

我复制您的代码及其工作：http://jsfiddle.net/mehmetakifalp/BxcCq/

$("#chained").scrollable({ 
    circular: true, 
    mousewheel: true, 
    onSeek: function() { 
     $('.caption').fadeIn('fast'); 
    }, 
    onBeforeSeek: function() { 
     $('.caption').fadeOut('fast'); 
    } 
}).navigator().autoscroll({ 
    interval: 6000 
});