Jssor Fade 幻灯片放映不起作用

Question

我很难让 Fade Slideshow 在我的页面上运行。该演示工作正常，但一旦我将其合并到我的文件中，淡入淡出过渡就不再有效。过渡持续时间结束后，第一个图像消失并被下一个图像取代。

我已经查看了我可以在 SO 上找到的所有相关问题和解决方案，其中 none 已经解决了我遇到的问题。我已经检查了其他浏览器（我的主要浏览器是chrome）并且幻灯片不褪色在它们之间是一致的。

也许我遗漏了一些重要的东西。任何帮助都将不胜感激！

HTML

<div id='jssor_container'>
    <div u='loading' id='jssor_loading_container'>
        <div id='jssor_loading_background'></div>
        <div id='jssor_loading_icon'></div>
    </div>
    <div u='slides' id='jssor_slides_container'>
        <div><img u='image' src='images/landscape/02.jpg'></div>
        <div><img u='image' src='images/landscape/03.jpg' /></div>
        <div><img u='image' src='images/landscape/04.jpg' /></div>
        <div><img u='image' src='images/landscape/05.jpg' /></div>
        <div><img u='image' src='images/landscape/06.jpg' /></div>
        <div><img u='image' src='images/landscape/07.jpg' /></div>
        <div><img u='image' src='images/landscape/08.jpg' /></div>
        <div><img u='image' src='images/landscape/09.jpg' /></div>
        <div><img u='image' src='images/landscape/10.jpg' /></div>
        <div><img u='image' src='images/landscape/11.jpg' /></div>
    </div>
    <div u='navigator' class='jssorb05'><div u='prototype'></div></div>
    <span u='arrowleft' class='jssora12l'></span>
    <span u='arrowright' class='jssora12r'></span>
</div>

JS

$(document).ready(function()
{
    var options =
    {
        $AutoPlay: true,
        $AutoPlayInterval: 1500, 
        $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: [{ $Duration: 700, $Fade: true, $Opacity: 2 }] },
        $BulletNavigatorOptions: { $Class: $JssorBulletNavigator$, $ChanceToShow: 2, $AutoCenter: 0, $SpacingX: 10, $SpacingY: 10 },
        $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$, $ChanceToShow: 2 }
    };

    var features_slider = new $JssorSlider$('jssor_container', options);
});

CSS

#jssor_container
{
    position: relative;
    display: inline-block;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 300px;
    margin: auto;
    overflow: hidden;
}

#jssor_loading_container
{
    position: absolute;
    top: 0px;
    left: 0px;
}

#jssor_loading_background
{
    filter: alpha(opacity=70);
    opacity: .7;
    position: absolute;
    display: block;
    background-color: #000000;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#jssor_loading_icon
{
    position: absolute;
    display: block;
    background: url(../images/jssor/loading.gif) no-repeat center center;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#jssor_slides_container
{
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 300px;
    overflow: hidden;
}

.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av
{
    background: url(../images/jssor/b05.png) no-repeat;
    overflow: hidden;
    cursor: pointer;
}

.jssorb05
{
    position: absolute;
    bottom: 16px;
    right: 6px;
}

.jssorb05 div
{
    background-position: -7px -7px;
    position: absolute;
    width: 16px;
    height: 16px;
}

.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

.jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn
{
    position: absolute;
    cursor: pointer;
    display: block;
    background: url(../images/jssor/a12.png) no-repeat;
    overflow: hidden;
}

.jssora12l
{
    background-position: -16px -37px;
    width: 30px;
    height: 46px;
    top: 123px;
    left: 0px;
}

.jssora12r
{
    background-position: -75px -37px;
    width: 30px;
    height: 46px;
    top: 123px;
    right: 0px;
}

.jssora12l:hover { background-position: -136px -37px; }
.jssora12r:hover { background-position: -195px -37px; }
.jssora12ldn { background-position: -256px -37px; }
.jssora12rdn { background-position: -315px -37px; }

Answer 1

请使用 class 名称为 'outer container' 和 'slides' 容器指定 css。

请替换

#jssor_container

和

.jssor_container

替换

#jssor_slides_container

和

.jssor_slides_container

替换

<div id='jssor_container'>

和

<div id='jssor_container' class="jssor_container">

替换

<div u='slides' id='jssor_slides_container'>

和

<div u='slides' id='jssor_slides_container' class="jssor_slides_container">

Jssor Fade 幻灯片放映不起作用

Jssor Fade slideshow isn't working

javascript

jquery

fade

jssor