将不透明层添加到除所选图像之外的所有滑块图像

Question

我有一个 IosSlider 效果很好，但是我想为除所选图像之外的所有图像添加不透明度。这将更加突出所选图像，并允许用户一次只关注一张图像。这是我的 javascript IosSlider 和图像指示器：

 <script>
        $(window).load(function() {
        
            $('.iosSlider').iosSlider({ 
            desktopClickDrag: true,
            onSlideChange: slideChange,
            navNextSelector: $('.nextButton'),
            navPrevSelector: $('.prevButton'),
            infiniteSlider:true,
            snapSlideCenter: true
          
             });
    });
            
    function slideChange(args) {
        
        try {
            console.log('changed: ' + (args.currentSlideNumber - 1));
        } catch(err) {
        }
        
        $('.indicators .item').removeClass('selected');
        $('.indicators .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
    
    }   
    </script>

这是我的 html 代码：

<section id="slider" >

<div class="container-fluid">
           
    <div class = 'responsiveHeight'>
            
        <div class = 'inner'>
                            
            <div class = 'iosSlider'>
                                
                <div class = 'slider'>
                                        
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/01 0614-23.1491.1503.jpg"/>
                                           
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/02 0614-23_1350.jpg"/>
                                          
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/03 0614-23_DSC2008.jpg"/>
                                          
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/04 0614-23_DSC2130.jpg"/>
                                            
                    <img class="item" src="../images/Project/Education-Municipal/grandcayman/05 0614-23_G3A1975crop2.jpg"/>
                    
                </div>
            
            </div>
            
        </div>
        <div class = 'prevButton'></div> 
        <div class = 'nextButton'></div>
    
    </div>
           
</div> <!-- end container -->

<div class = 'indicators'>
    <div class = 'item selected'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
    <div class = 'item'></div>
</div>

我正在尝试将所有滑块图像设置为不透明度 0.3，当前使用 CSS 选择的图像除外：

img {
opacity: .3;
}

img .item .selected{
opacity: 1;
}

我对 Javascript 不是很精通，但我想知道是否有使用 CSS 或 Javascript 的简单方法来做到这一点。谢谢。请查看示例图片以进一步解释我要完成的工作： Desired slider result

Answer 1

快到了！在 CSS 中，space 字符是子运算符，因此您当前的选择器 img .item .selected 将 class 或 selected 的元素定位为 class item，它本身就是 img 元素的子元素。

在您的情况下，我相信您的意思是定位同时具有 class 和 selected 和 item 的图像。如果是这样，只需删除 spaces:

img.item.selected {
    //...
}

Answer 2

感谢您的帮助！我需要一点推动，我正朝着正确的方向前进。我将 CSS 更改为：

.item.selected{
opacity: 1;

}

但我仍然需要添加一些 javascript 才能让它工作，所以我将这两行添加到另一个“指标”下方 javascript:

$('img.item').removeClass('selected');
$('img.item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');

将不透明层添加到除所选图像之外的所有滑块图像

Adding opacity layer to all slider images except the selected image

javascript

css

slider

opacity

ios