Question

我见过类似的问题，但我不认为我见过的任何问题都会发生。我的目标是将多个功能的间隔重置在一起。这是一个带有小导航按钮的淡入淡出幻灯片。我可以让按钮工作，但我希望幻灯片停留在该幻灯片上间隔时间（4.5秒），然后从那里继续而不是跳到它的位置。希望有道理。任何帮助非常感谢。

$(document).ready(function () {

        $("#slider div:gt(0), #slideinfo p:gt(0)").fadeOut()

        $("#circleholder div.circle1").click(circle1)   
        $("#circleholder div.circle2").click(circle2)
        $("#circleholder div.circle3").click(circle3)
        $("#circleholder div.circle4").click(circle4)
        $("#circleholder div.circle5").click(circle5)



            setInterval(function timer(){
                circle1();
            },22500);
        setTimeout(function () {
                circle2();  
            setInterval(function timer(){
                circle2();
            },22500);                   
        }, 4500);

        setTimeout(function () {
                circle3();
            setInterval(function timer(){
                circle3();
            },22500);                   
        }, 9000);

        setTimeout(function () {
                circle4();
            setInterval(function timer(){
                circle4();
            },22500);   
        }, 13500);

        setTimeout(function () {
                circle5();
            setInterval(function timer(){
                circle5();
            },22500);
        }, 18000);


        function circle1 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(0), #slideinfo p:eq(0)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle1").addClass("activecircle")
        };

        function circle2 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(1), #slideinfo p:eq(1)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle2").addClass("activecircle")
        };

        function circle3 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(2), #slideinfo p:eq(2)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle3").addClass("activecircle")
        };

        function circle4 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(3), #slideinfo p:eq(3)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle4").addClass("activecircle")
        };

        function circle5 () {       
            $("#slider div.slide, #slideinfo p").fadeOut(1000)
            $("#slider div:eq(4), #slideinfo p:eq(4)").fadeIn(1000)
            $("*").removeClass("activecircle")
            $("#circleholder div.circle5").addClass("activecircle")
        };


});

Answer 1

试试这个：http://codepen.io/anon/pen/doKpzx

我刚写了迷你幻灯片，它是可扩展的，你不需要手动编写事件。

var btns = $('.btns'),
    cont = $('.slideshow'),
    slides = cont.find('.slide'),
    index = slides.filter('.show').index() || 0,
    delay = 1,
    duration = 1,
    timer;

slides.eq(index).addClass('show');
createDots();
selectDot();
addEvents();

function createDots(){
  var n = slides.length, dots = btns.children('.dots');
  while (n--) dots.append($('<div class="dot">'));  
}

function selectDot(){
  btns.find('.dots .dot').removeClass('active')
    .eq(index).addClass('active');
}

function addEvents() {
  btns.find('.prev').click(function(){
    index = --index; 
    if (index<0) index=slides.length-1;
    updateSlides();
  });
  btns.find('.next').click(function(){
    index = ++index % slides.length; 
    updateSlides();
  });
  btns.find('.dot').click(function(){
    index =  $(this).index();
    updateSlides();
  });
}

function updateSlides() {
  selectDot(); 
  clearTimeout(timer);
  timer = setTimeout(function(){
    slides.not('.show').hide();
   slides.filter('.show').removeClass('show')
    .stop().fadeOut(duration*1000);
    slides.eq(index).fadeIn(duration*1000).addClass('show');
  },delay*1000);
}

点击时重置间隔

1 个答案: