时间戳

首页 > 解决方案 > 将不透明层添加到除所选图像之外的所有滑块图像

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

问题描述

我有一个运行良好的 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 来做到这一点。谢谢。请查看示例图像以进一步解释我要完成的工作： 所需的滑块结果

标签： javascriptcssiosslideropacity

解决方案

差不多好了！在 CSS 中，空格字符是子运算符，因此您当前的选择器img .item .selected以 class of 的元素为目标，这些元素是 classselected项的子项item，它本身就是img元素的子项。

在您的情况下，我相信您的意思是定位一个同时具有类selected和item. 如果是这样，只需删除空格：

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

推荐阅读