Question

我正在尝试为我网站上的主页创建幻灯片，但它似乎无法正常工作我正在使用this JsFiddle中的代码，但它不会在我的网站上滑动。以下是我添加到我网站的所有代码：

HTML：

    <!-- "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>
        <img width="1000" height="500" src="http://placekitten.com/470/260" alt="" />
        <div class="caption-bkgd"></div>
        <div class="caption">Nearly 1 in 10 Kids Has ADHD</div>
      </div>

      <!-- 5-10 -->

      <div>
        <img width="1000" height="500" src="http://placekitten.com/469/260" alt="" />
        <div class="caption-bkgd"></div>
        <div class="caption hide">Nearly 2 in 10 Kids Has ADHD</div>
      </div>

      <!-- 10-15 -->
      <div>
        <img width="1000" height="500" src="http://placekitten.com/468/260" alt="" />
        <div class="caption-bkgd"></div>
        <div class="caption hide">Nearly 3 in 10 Kids Has ADHD</div>
      </div>

   </div>

使用Javascript：

<script>
$(document).ready(function() {

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

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: 1200px;
    height:200px;
    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 Myriad Pro;
}
.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;}

Here's a picture of what the slideshow looks like.

为什么它看起来像这样，我该如何解决？

Answer 1

修改让事情在jsFiddle中运作：

添加jQuery作为脚本依赖项：

将jQuerytools添加为另一个资源：

同样，要使页面上的内容正常工作，请在Head标记中添加上述脚本。顺序很重要，首先是jQuery，后来是依赖。

<head> <script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js" type="text/javascript"> </head>

从提供的代码。您似乎只是尝试使用具有不同尺寸图像的相同滑块。

我不熟悉.scrollable，但您似乎需要更改CSS中的width和height才能获得所需的结果。

CSS下方突出显示需要使用正确的width和height
进行更新的区域
对于图像1000x500

.scrollable { ... width: 1000px; height:500px; } .scrollable .items { ... height: 500px; } .items div { ... width:1000px; } .scrollable img { ... width:1000px; height:500px; } .navi { ... width:1000px; }

...表示原样保留其他样式。

在这里小提琴：http://jsfiddle.net/Varinder/9hcRC/

幻灯片显示不起作用？

1 个答案: