jssor附近的滑块不透明度即将拍摄的照片 [英] jssor nearby slider opacity upcoming photos

问题描述

我正在使用附近的jssor滑块接近全屏显示.我希望即将出现的图像不在主视口中时的不透明度为0.25.因此，即将到来的幻灯片和上一张幻灯片的边缘将具有轻微的不透明性.

Im using the jssor nearby slider its nearly fullscreen. I want the upcoming images to have an opacity of 0.25 when they are not in the main viewport. Therefore the edges of the upcoming and previous slides would have slight opacity.

<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; }

推荐答案

您可以执行以下操作:

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

这篇关于jssor附近的滑块不透明度即将拍摄的照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！