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

如何解决向除所选图像之外的所有滑块图像添加不透明层

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

 <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

解决方法

快到了！在 CSS 中，空格字符是一个子操作符，因此您当前的选择器 img .item .selected 以类为 selected 的元素为目标，这些元素是类 item 的子项，它本身就是img 元素。

就您而言，我相信您的意思是定位同时具有 selected 和 item 类的图像。如果是这样，只需删除空格：

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

,

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

.item.selected{
opacity: 1;

}

但后来我仍然需要添加一些 javascript 才能使其工作，所以我在另一个“指标”javascript 下方添加了这两行：

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