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
});

图片幻灯片无法正常工作

1 个答案: