Question

我有一个用于图像的滑块，我将其转换为文本以淡入和淡出引号，由于某种原因，每次加载新幻灯片时，它会在容器底部闪烁，然后将其电影上传。有谁知道这可能是什么？

HTML：

<section id="slider" class="container">
<ul class="slider-wrapper">
<li class="current-slide">
<div class="quote">This is a product quote and testimonial.. blah blah blah, DonorPro is very good, <span>blah blah blah, DonorPro is very good</span>.
<div class="author">Random Company/Orgainization&nbsp;</div>
</div>
</li>
<li>
<div class="quote">This is a product quote and testimonial.. blah blah blah, DonorPro is very good, <span>blah blah blah, DonorPro is very good</span>.
<div class="author">Random Company/Orgainization 2&nbsp;</div>
</div>
</li>
<li>
<div class="quote">This is a product quote and testimonial.. blah blah blah, DonorPro is very good, <span>blah blah blah, DonorPro is very good</span>.
<div class="author">Random Company/Orgainization 3&nbsp;</div>
</div>
</li>
</ul>
</section>

JS：

$(function() {

     var SliderModule = (function() {
        var pb = {};
        pb.el = $('#slider');
        pb.items = {
            panels: pb.el.find('.slider-wrapper > li'),
        }

        var SliderInterval,
            currentSlider = 0,
            nextSlider = 1,
            lengthSlider = pb.items.panels.length;

        pb.init = function(settings) {
            this.settings = settings || {duration: 8000};
            var items = this.items,
                lengthPanels = items.panels.length,
                output = '';

            for(var i = 0; i < lengthPanels; i++) {
                if(i == 0) {
                    output += '<li class="active"></li>';
                } else {
                    output += '<li></li>';
                }
            }

            activateSlider();
            $('#control-buttons').on('click', 'li', function(e) {
                var $this = $(this);
                if(!(currentSlider === $this.index())) {
                    changePanel($this.index());
                }
            });

        }

        var activateSlider = function() {
            SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
        }

        // Funcion para la Animacion
        pb.startSlider = function() {
            var items = pb.items,
                controls = $('#control-buttons li');
            // Comprobamos si es el ultimo panel para reiniciar el conteo
            if(nextSlider >= lengthSlider) {
                nextSlider = 0;
                currentSlider = lengthSlider-1;
            }

            controls.removeClass('active').eq(nextSlider).addClass('active');
            items.panels.eq(currentSlider).fadeOut('slow');
            items.panels.eq(nextSlider).fadeIn('slow');

            currentSlider = nextSlider;
            nextSlider += 1;
        }

        var changePanel = function(id) {
            clearInterval(SliderInterval);
            var items = pb.items,
                controls = $('#control-buttons li');

            if(id >= lengthSlider) {
                id = 0;
            } else if(id < 0) {
                id = lengthSlider-1;
            }

            controls.removeClass('active').eq(id).addClass('active');
            items.panels.eq(currentSlider).fadeOut('slow');
            items.panels.eq(id).fadeIn('slow');


            currentSlider = id;
            nextSlider = id+1;

            activateSlider();
        }

        return pb;
     }());

     SliderModule.init({duration: 5000});

});

Answer 1

嘿，我认为事情就是你这样做了

items.panels.eq(nextSlider).fadeOut('slow');
items.panels.eq(nextSlider).fadeIn('slow');

我所做的就是自动隐藏它并淡化。

items.panels.eq(currentSlider).hide();
items.panels.eq(nextSlider).fadeIn('slow');

这是JSFiddle代码：http://jsfiddle.net/eu1rqh1z/3/

Answer 2

这是因为两个幻灯片同时显示在包装器中。由于自然的html流程，第二个进入下一行

一个解决方案是使包装器相对，并使幻灯片绝对，这样一个会在另一个出现时消失，但仍然处于正确的位置。

.slider-wrapper > li {
    position: absolute;
}

JSFiddle演示：http://jsfiddle.net/eu1rqh1z/4/

滑块滑块未对齐？

2 个答案: