不透明度和z索引的滑块无法正常工作

slider with opacity and z-index not working properly

本文关键字：常工作 工作 索引 不透明度      更新时间：2023-09-26

我对JQuery很陌生。我正在制作一个滑块，当点击拇指时会显示图像。现在，我已经为拇指和完整图像赋予了一些数据角色，这样，如果点击拇指3，则数据id 3的完整图像将设置为opacity 1和z-index更大。不知怎的，当拇指被点击时，滑块第一次工作，但当我第二次点击时，图像没有显示，它的i和拇指相同。这是我的代码

HTML

<div id="sliderContainer">
    <!--Filters -->
    <ul id="filterList">
        <li>All</li>
        <li>Objects</li>
        <li>Fashion</li>
        <li>Nature</li>
    </ul>
    <span id="titleText">asdsd</span>
    <!--Thumbs List-->
    <ul id="thumbsList">
        <li class="thumbs" data-thumbid="1" data-title="Girl Eating Something"><img src="images/fashion/fashion1Thumb.jpg" /></li>
        <li class="thumbs" data-thumbid="2" data-title="Beautiful Face"><img src="images/fashion/fashion2Thumb.jpg" /></li>
        <li class="thumbs" data-thumbid="3" data-title="Cinderella"><img src="images/fashion/fashion3Thumb.jpg" /></li>
        <li class="thumbs" data-thumbid="4" data-title="Apple Mobile"><img src="images/objects/object1Thumb.jpg" /></li>
        <li class="thumbs" data-thumbid="5" data-title="Coke Can"><img src="images/objects/object2Thumb.jpg" /></li>
        <li class="thumbs" data-thumbid="6" data-title="Mountains"><img src="images/nature/nature1thumb.jpg" /></li>
    </ul>

    <img class="productsSliderImage" data-fullimageid="1" src="images/fashion/fashion1Full.jpg" />
    <img class="productsSliderImage" data-fullimageid="2" src="images/fashion/fashion2Full.jpg" />
    <img class="productsSliderImage" data-fullimageid="3" src="images/fashion/fashion3Full.jpg" />
    <img class="productsSliderImage" data-fullimageid="4" src="images/objects/object1Full.jpg" />
    <img class="productsSliderImage" data-fullimageid="5" src="images/objects/object2Full.jpg" />
    <img class="productsSliderImage" data-fullimageid="6" src="images/nature/nature1Full.jpg" />
    <img class="productsSliderImage" data-fullimageid="7" src="images/nature/nature1Full.jpg" />
</div>

这是我的JQUERY

$(document).ready(function () {
    $(".productsSliderImage").css('opacity', '0');
});
$(document).ready(function () {
    $('.thumbs').click(function () {
        var currentThumbId = $(this).attr("data-thumbid"); //grab thumbId of clicked thumb.
        //Changing css of the fullscreenImage which is equal to clcked thumb.
        //Animation is done using Opacity in css.
        $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').css('z-index', '33');
        $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').css('opacity', '1');
        var notClicked = $('.productsSliderImage[data-fullImageId="' + currentThumbId + '"]').not(this);
        notClicked.css('opacity', '1');
        notClicked.css('z-index', '1');
    });
});

还有我的Css

.productsSliderImage {
    position: absolute;
    z-index: 1;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

所以基本上你可以做这样的事情.动画

{等等等等}然后我jquery，你可以使用类似于onclick（）的东西

$('#abc').addClass('animation');

和删除类的方法相同。感谢

您总是可以创建一个具有您想要添加的属性的类，例如z索引和不透明度，而不是编写冗长的代码。您可以使用addClass（）和removeClass（）方法来实现这一点。请阅读此处addClass（）方法信息。

谢谢。

试试吧，

CSS

.animate{
   zIndex:33;
   opacity:1
}

脚本

$('.thumbs').click(function () {
    var thumbId = $(this).data("thumbid"); //use data function    
    // remove class for all products
    $('.productsSliderImage').removeClass('animate');
    // set current product image class to overlap
    $('.productsSliderImage[data-fullImageId="'+thumbId+'"]').addClass('animate');
});
相关文章：