这是一个脚本,当单击prevnext按钮时,它充当简单的轮播方式淡入和淡出一些图像。

我使用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);
    });

});


我决定尝试通过css通过toggleClass()方法切换类来使用淡入淡出效果来淡化每个图像的另一种解决方案。这是我的问题所在...现在唯一消失的图像是第一张图像。我无法再访问任何其他图像。

我推测我可能需要遍历每张图片,并以不同的方式来解决这个问题。

这是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');

    });
});

最佳答案

我对您的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');
        });

关于javascript - 使用toggleClass淡入淡出图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34543050/

10-11 23:28
查看更多