javascript - jssor 附近的 slider 不透明度即将到来的照片

Question

我正在使用 jssor 附近的 slider ，它几乎是全屏的。当即将到来的图像不在主视口(viewport)中时，我希望它们的不透明度为 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; }

Answer 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');
});