我使用附近的jssor滑块几乎全屏。我希望即将出现的图像在不在主视口中时具有0.25的不透明度。因此,即将到来的和之前幻灯片的边缘会有轻微的不透明度。
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 800px; height: 500px; overflow: hidden; visibility: hidden;">
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 800px; height: 500px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="images/slide01.png"/>
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="images/slide02.png" />
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="images/slide03.png" />
</div>
</div>
JS
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$Cols: 2,
$SlideWidth:600,
$SlideHeight:420,
$Align: 100,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_1_slider.$ScaleWidth(Math.min(bodyWidth, 1920));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
});
CSS
.jssorb01 {
position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
position: absolute;
/* size of bullet elment */
width: 12px;
height: 12px;
filter: alpha(opacity=70);
opacity: .7;
overflow: hidden;
cursor: pointer;
border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }
答案 0 :(得分:1)
您可以执行以下操作:
<强> HTML 强>
<div data-u="slides" id="slideimage-content">
<?php foreach ($sectionImage as $key => $value) {?>
<div data-p="112.50" style="display: none;border-style:none; ">
<img data-u="image" src="<?php echo $value['url'] ?>" style="border-style:none;"/>
<div class="slidecover slidecover<?php echo $key ?> coverdark"></div>
</div>
<?php } ?>
</div>
<强> CSS 强>
.slidecover {
width: 100%;
height: 100%;
position: absolute
}
.coverdark {
background: rgba(0, 0, 0, 0.5);
}
<强> JS 强>
jssor_1_slider.$On($JssorSlider$.$EVT_STATE_CHANGE, function(slideIndex)
{
$(".slidecover").each(function(){
if(!$(this).hasClass('coverdark')){
$(this).addClass('coverdark');
}
});
$(".slidecover" + jssor_1_slider.$CurrentIndex()).removeClass('coverdark');
});