Jssor Fade幻燈片無法正常工作

Question

我無法在頁面上使用淡入淡出幻燈片。演示效果很好，但只要我將它合併到我的文件中，淡入淡出轉換就不再起作用。第一個圖像消失後，在轉換持續時間過後，由下一個圖像替換。

我已經經歷了所有我能找到的相關問題和解決方案，而且他們都沒有解決我所看到的問題。我檢查了其他瀏覽器（我的主瀏覽器是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

請使用類名來指定「歐特CSS r容器'和'幻燈片'容器。

請更換

#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">