我很难在页面上使用渐变幻灯片。这个演示效果很好,但一旦我把它合并到我的文件中,渐变就不再有效了。第一个图像消失,并在过渡持续时间过去后由下一个图像替换。
我已经研究了我在SO上能找到的所有相关问题和解决方案,但没有一个解决了我看到的问题。我已经检查了其他浏览器(我的主要浏览器是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; }
请使用类名为"外部容器"one_answers"幻灯片"容器指定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">