Question

我正在制作这个自动幻灯片，它遇到了这个问题。我有 4 张幻灯片。当第一次自动播放将幻灯片 4 与幻灯片 2 和 3 重叠时，它只会在站点加载后发生一次。当幻灯片第二次播放时，当我使用底部的点时，它工作得很好，没有任何问题。

$(document).ready(function(){

$("#slideshow > div:gt(0)").hide();

var slidesl = $('.slideitem').length

var d = "<li class=\"dot active-dot\">&bull;</li>";

for (var i = 1; i < slidesl; i++) {
  d = d+"<li class=\"dot\">&bull;</li>";
}   
var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";

$("#slideshow").append(dots);
$("#slideshow > div:gt(0)").hide();
var interval = setInterval(slide, 3000);

function intslide(func) {
    if (func == 'start') { 
    interval = setInterval(slide, 3000);
    } else {
        clearInterval(interval);        
        }
}

function slide() {
        sact('next',0, 1200);
}
    
function sact(a, ix, it) {
        var currentSlide = $('.current');
        var nextSlide = currentSlide.next('.slideitem');
        var prevSlide = currentSlide.prev('.slideitem');
            var reqSlide = $('.slideitem').eq(ix);

            var currentDot = $('.active-dot');
          var nextDot = currentDot.next();
          var prevDot = currentDot.prev();
            var reqDot = $('.dot').eq(ix);
        
        if (nextSlide.length == 0) {
            nextDot = $('.dot').first();
            nextSlide = $('.slideitem').first();
            }

        if (prevSlide.length == 0) {
            prevDot = $('.dot').last();
            prevSlide = $('.slideitem').last();
            }
            
        if (a == 'next') {
            var Slide = nextSlide;
            var Dot = nextDot;
            }
            else if (a == 'prev') {
                var Slide = prevSlide;
                var Dot = prevDot;
                }
                else {
                    var Slide = reqSlide;
                    var Dot = reqDot;
                    }

        currentSlide.fadeOut(it).removeClass('current');
        Slide.fadeIn(it).addClass('current');
        
        currentDot.removeClass('active-dot');
        Dot.addClass('active-dot');
}   


$('.next').on('click', function(){
        intslide('stop');                       
        sact('next', 0, 400);
        intslide('start');                      
    });//next

$('.prev').on('click', function(){
        intslide('stop');                       
        sact('prev', 0, 400);
        intslide('start');                      
    });//prev

$('.dot').on('click', function(){
        intslide('stop');
        var index  = $(this).index();
        sact('dot', index, 400);
        intslide('start');                      
    });//prev
//slideshow
});

这是小提琴 - https://jsfiddle.net/Udara_Samapth/c1zevrLj/23/

Answer 1

我注意到有很多事情使您的幻灯片重叠。首先查看您的 jquery/JS，您使用的是 jquery hide 方法，但在函数 sact() 中，您使用的是添加不透明度类的 fadeIn() 和 fadeOut() 函数。

   currentSlide.fadeOut(it).removeClass('current');
   Slide.fadeIn(it).addClass('current');

这使得顶部和底部的项目在某个不透明点开始混合。

为了解决这个问题，我现在想到了两个解决方案。

最简单的方法是为项目添加背景颜色。

.slideshow .slideitem {
  display: none;
  background: #FFF;
}

另一项工作是控制不透明度时间，这需要对您的 JS 部分进行一些工作。您可以通过在 fadeIn() 和 fadeOut() 函数上添加延迟来实现。

这是您的工作链接。 https://jsfiddle.net/liquidcharcoal/gqyjph1a/13/

自动播放时Javascript幻灯片幻灯片重叠

1 个答案: