旋转木马后退按钮不工作，为什么？

下面显示的代码适用于图片轮播。右箭头完美无缺。所以我试图简单地为左边做相反的事情，但显然这是不正确的。有没有简单的我做错了，或者这不是一种你可以做到这一点的方式？当我点击它时，什么都不会发生。点不移动，也不移动图片。但是右箭头完美地工作，甚至在到达最后时还会回绕。我感谢和所有帮助。旋转木马后退按钮不工作，为什么？

var main = function(){ 
"use strict"; 

$('.right-arrow').click(function(){ 
    var currentSlide = $('.active-slide'); 
    var nextSlide = currentSlide.next(); 

    var currentDot = $('.active-dot'); 
    var nextDot = currentDot.next(); 

    if(currentSlide.is(':last-child')){ 
     nextSlide = $('.slide').first(); 
     nextDot = $('.dot').first(); 

    } 

    currentSlide.fadeOut(600, function(){ 

     nextSlide.fadeIn(600).addClass('active-slide'); 

    }).removeClass('active-slide'); 

    currentDot.removeClass('active-dot'); 
    nextDot.addClass('active-dot'); 


}); 

$('.left-arrow').click(function(){ 
     var currentSlide = ('.active-slide'); 
     var prevSlide = currentSlide.prev();  

     var currentDot = $('.active-dot'); 
     var prevDot = currentDot.prev(); 

     if(prevSlide.is(':first-child')){ 
      prevSlide = $('.slide').last(); 
      prevDot = $('.dot').last(); 
     } 

     currentSlide.fadeOut(600, function(){ 
      prevSlide.fadeIn(600).addClass('active-slide'); 
     }).removeClass('active-slide'); 

     currentDot.removeClass('active-dot'); 
     prevDot.addClass('active-dot'); 
    }); 
}; 


$(document).ready(main);

，这里是与它一起去的HTML：

<div class="slider"> 
    <div class="slide active-slide"> 
     <img src="pic1.jpg" alt="TBP"> 
    </div> 

    <div class="slide"> 
     <img src="pic2.JPG" alt="TBP"> 
    </div> 

    <div class="slide"> 
     <img src="pic3.jpg" alt="TBP"> 
    </div> 

    <div class="slide"> 
     <img src="pic4.jpg" alt="TBP"> 
    </div> 
</div> 

<a href="#"><img class="left-arrow" src="left-arrow.svg" alt="go left!"></a> 

    <ul class="slider-dots"> 
     <li class="dot active-dot">&bull;</li> 
     <li class="dot">&bull;</li> 
     <li class="dot">&bull;</li> 
     <li class="dot">&bull;</li> 
    </ul> 

<a href="#"><img class="right-arrow" src="right-arrow.svg" alt="bleh"></a>

来源

2016-02-07 RM3

$你能不能做一个演示吗？（在codepen或其他） –

'if（prevSlide.is（'：first-child'））{'，在这一行我认为你应该写，'if（currentSlide.is（'：first-child'）） {'。 – sahil

我想是因为你缺少在varriable var currentSlide = ('.active-slide');

来源

2016-02-07 17:52:43

你是天赐之物，谢谢。我不能相信我错过了这一点。欣赏它。对不起，这不是一个更有趣的问题哈哈 – RM3

旋转木马后退按钮不工作，为什么？

回答

相关问题