Javascript HTML转盘未注册

我试图让旋转木马正常工作，但当点击箭头时，幻灯片不会改变

这是我的密码，

HTML:

JS:

这就是我试图实现的目标，遵循我的示例。

---

正如nevermind提到的，代码中有一些打字错误。fasein（）应该是

fadeIn（）

，而fadeout（）需要大写为

fadeout（）

。但是，即使有了这些修复，您仍然可能会遇到一些问题，因为在

fadeOut（）

动画完成之前，滑块将显示系列中的下一张幻灯片。最好将

fadeIn（）

动画和目标下一张幻灯片放在活动幻灯片动画的回调函数中。下面是一个你可以做的例子：

     currentSlide.fadeOut(600, function(){

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

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

     });

---

希望这有帮助。

我对JS文件的更改：

var main = function(){
//Carousel

//arrow-next

$('.arrow-next').click(function(e){
     e.preventDefault(); //Added this

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

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

  currentSlide.fadeOut(600, function() { //Fixed spelling errors
     $(this).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide'); //Fixed spelling errors
  });

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

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

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

//Followed the same pattern for arrow-prev

//arrow-prev

$('.arrow-prev').click(function(e){
     e.preventDefault();

    var currentSlide = $('.active-slide');
    var prevSlide= currentSlide.prev();

    if(prevSlide.length === 0){
        prevSlide = $('.slide').last();
    }

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

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

    if(prevDot.length === 0){
        prevDot = $('.dot').last();
    }

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

---

最终产品

fasein…fadeout-应该是fadeout。。。修复它，并让我们知道是否有更多的问题@nevermind修复了打字错误，很好，我的坏：{看到了你在codepen中所做的，添加了

$（'.arrow next'）。单击（函数（e）{e.preventDefault（）；

使旋转木马移动，但它有一个奇怪的效果谢谢你！修复了打字错误并添加了@nevermind所做的

$（'.arrow next'）。单击（函数（e）{e.preventDefault（））

然后，按照你所做的，@hugorut使旋转木马流畅地移动。

 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);

     currentSlide.fadeOut(600, function(){

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

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

     });

var main = function(){
//Carousel

//arrow-next

$('.arrow-next').click(function(e){
     e.preventDefault(); //Added this

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

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

  currentSlide.fadeOut(600, function() { //Fixed spelling errors
     $(this).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide'); //Fixed spelling errors
  });

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

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

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

//Followed the same pattern for arrow-prev

//arrow-prev

$('.arrow-prev').click(function(e){
     e.preventDefault();

    var currentSlide = $('.active-slide');
    var prevSlide= currentSlide.prev();

    if(prevSlide.length === 0){
        prevSlide = $('.slide').last();
    }

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

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

    if(prevDot.length === 0){
        prevDot = $('.dot').last();
    }

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