Javascript 图像幻灯片无法播放

我遵循这一点，创建了我将在主页上看到的幻灯片库。 我试图移动到另一个文件，但没有成功。 在JSFIDLE内部，它工作得非常好，但在我的应用程序内部却失败了。 当我检查我是否正确地要求所有这些文件时，似乎还可以

我的看法是：

我的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;}

---

我试图在视图中移动代码，但没有成功。

您需要添加以下js:

这个滑动使用jquery 1.4.2检查你的jquery版本我也使用1.6.4-1.8.3

我复制了您的代码及其有效性：

---

您的JavaScript控制台中是否收到任何错误？请提供您的应用程序url。请确定，您是否包含jquery库？@RizwanSultan@mageshkumar这是我在视图中看到的

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

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

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