javascript - HTML 轮播未注册

Question

我试图让我的轮播正常运行，但是当单击箭头时，幻灯片不会改变。

这是我的代码， http://codepen.io/rkrc/pen/ogPaqM

HTML:

<div class="slider"> 
 <!-- picture 01 -->
  <div class="slide active-slide">
   <div class="container">
    <img src="image"> 
   </div>
  </div>
 <!-- picture 02 -->
  <div class="slide">
   <div class="container">
    <img src="image"> 
   </div>
  </div>
 <!-- picture 03 -->
  <div class="slide">
   <div class="container">
    <img src="image">
   </div>
  </div>
 <!-- picture 04 -->
  <div class="slide">
   <div class="container">
    <img src="image">
   </div>
  </div>
 <!-- picture 05 -->
  <div class="slide">
   <div class="container">
    <img src="image">
   </div>
  </div>
 </div>

 <!-- Slider nav -->
  <div class="slider-nav"> 
   <a href="" class="arrow-prev"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png"></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>
      <li class="dot">&bull;</li>
       </ul>
    <a href="" class="arrow-next"><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png"></a> 
   </div>
   <!--End of slide show-->

CSS:

/* Carousel */

.slider {
 background-color: #f7f7f7;
 position: relative;
 width: 100%;
 height: 400px;
 border-bottom: 10px solid #f7f7f7;
 border-top: 10px solid #f7f7f7;
}

.slide {
 text-align: center;
 background: #f7f7f7;
 display: none;
 position: relative;
 width: 100%;
 height: 100%;
}

.active-slide {
 display: block;
}

.slider-nav {
 text-align: center;
 margin-top: 20px;
}

.arrow-prev {
 margin-right: 45px;
 display: inline-block;
 vertical-align: top;
 margin-top: 9px;
}

.arrow-next {
 margin-left: 45px;
 display: inline-block;
 vertical-align: top;
 margin-top: 9px;
}

.slider-dots {
 list-style: none;
 display: inline-block;
 padding-left: 0;
 margin-bottom: 0;
}

.slider-dots li {
 color: #bbbcbc;
 display: inline;
 font-size: 30px;
 margin-right: 5px;
}

.slider-dots li.active-dot {
 color: #363636;
}

JS:

 var main = function(){
//Carousel
$('.arrow-next').click(function(){

    var currentSlide = $('.active-slide');
    var nextSlide= currentSlide.next();

    if(nextSlide.length === 0){
        nextSlide = $('.slide').first();
    }

    currentSlide.fadeout(600).removeClass('active-slide');
    nextSlide.faseIn(600).addClass('active-slide');

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

    if(nextDot.length === 0){
        nextDot = $('.dot').first();
    }

    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
 });
};
$(document).ready(main);

这就是我按照 Codecademy 示例想要实现的目标。
http://codepen.io/rkrc/pen/Wbappy

Answer 1

正如提到的，您的代码中有一些拼写错误没关系。 fasein() 应为 fadeIn()，fadeout() 需要大写为 fadeOut()。然而，即使进行了这些修复，您仍然可能会遇到一些问题，因为 slider 将在 fadeOut() 动画完成之前显示该系列中的下一张幻灯片。最好将 fadeIn() 动画和目标下一张幻灯片放在事件幻灯片动画的回调函数中。以下是您可以执行的操作的示例:

     currentSlide.fadeOut(600, function(){

         $(this).removeClass('active-slide');

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

     });

希望这有帮助。