Question

这是一个脚本，当点击prev和next按钮时，它可以作为简单的轮播来淡入和淡出一些图像。

我通过使用jQuery fadeIn()和fadeOut()方法成功实现了淡入和淡出。

var speed = 100;

$('.prev').click(function(event){
    event.preventDefault(); 

    var current = $(this).parent().next('ul.images').children(':visible'),
    lastSib = $(this).parent().next('ul.images').children(':last'),
    prevSib = current.prev();

    prevSib = prevSib.index() == -1 ? lastSib : prevSib; 

    current.fadeOut(speed,function(){
        prevSib.fadeIn(speed);
    });

});

我决定通过使用toggleClass()方法切换类，使用css来淡化每个图像。这是我的问题发生的地方...... 现在消失的唯一图像是第一张图像。我再也无法访问任何其他图片了。

我猜测我可能需要循环遍历每个图像并以不同的方式处理此解决方案。

这是codepen

的链接

$(document).ready(function(){

    var speed = 100;

    $('.prev').click(function(event){
        event.preventDefault(); 

        var current = $(this).parent().next('ul.images').children(':visible'),
        lastSib = $(this).parent().next('ul.images').children(':last'),
        prevSib = current.prev();
        prevSib = prevSib.index() == -1 ? lastSib : prevSib; 

     // fading out fading in  
        current.toggleClass('out');
        prevSib.toggleClass('in');
    });

$('.next').click(function(event){
    event.preventDefault();

    var current = $(this).parent().next('ul.images').children(':visible'),
    firstSib = $(this).parent().next('ul.images').children(':first'),
    nextSib = current.next();

    nextSib = nextSib.index() == -1 ? firstSib : nextSib; 

        current.toggleClass('out');
        nextSib.toggleClass('in');
});

$('.images li').click(function(event){
    event.preventDefault();

    var firstImg = $(this).parent().children(':first'),
            nextImg = $(this).next();

    nextImg = nextImg.index() == -1 ? firstImg : nextImg;

    $(this).toggleClass('out');
    nextImg.toggleClass('in');

    });
});

Answer 1

我在CSS和JQuery代码中做了一些更改。使用这些更新的代码，它将帮助您满足您的要求。

CSS代码

        .images li{
            list-style:none;
            display:none;
        }

        .images li:first-child{
            display: block;
        }

        li{
            transition:opacity 0.4s;
            opacity:1;
        }

        .out{
            transition:opacity 0.2s;
            opacity:0;
            display:none !important;
        }

        .in{
            transition:opacity 0.4s;
            opacity:1;
            display:list-item !important;
        }

下一个和上一个Click事件的JQuery代码

$('.prev').click(function(event){
            event.preventDefault(); 

            var current = $(this).parent().next('ul.images').children(':visible'),
            lastSib = $(this).parent().next('ul.images').children(':last'),
            prevSib = current.prev();

            // true previous 
            prevSib = prevSib.index() == -1 ? lastSib : prevSib; 

            current.removeAttr('class');
            current.toggleClass('out');
            prevSib.toggleClass('in');
        });

        $('.next').click(function(event){
            event.preventDefault();

            var current = $(this).parent().next('ul.images').children(':visible'),
            firstSib = $(this).parent().next('ul.images').children(':first'),
            nextSib = current.next();

            // true next 
            nextSib = nextSib.index() == -1 ? firstSib : nextSib; 

            current.removeAttr('class');
            current.toggleClass('out');
            nextSib.toggleClass('in');
        });

使用toggleClass淡化图像

1 个答案: