试图解决 jquery 滑块控件中的这个错误

Question

我已经尝试解决这个问题很多很多个小时了。我遇到一个问题，如果您在幻灯片放映循环后单击它们，此 jquery 滑块上的指示器将停止改变不透明度。

此外，当您单击第一个指示器时，它的不透明度似乎根本没有改变。

function slideSwitch() {

var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

 if ( $active.length == 0 ) $active = $('.bannercontainer IMG:last');

 if ( $indicator.length == 0 ) $indicator = $('.bannerindicator:last');

var $next = $active.next().length ? $active.next()
    : $('.bannercontainer img:first');    

var $nexti = $indicator.next().length ? $indicator.next()
    : $('.bannerindicator:first');

$next.addClass('active');

    $nexti.animate({opacity: 1}, 1000, function() {
    $nexti.addClass('active');
        }); 

 $active.animate({opacity: 0}, 1000, function() {
        $active.removeClass('active');
        });

$indicator.animate({opacity: 0.2}, 1000, function() {
        $indicator.removeClass('active');
        });

$next.css({opacity: 0})
     .addClass('active')
     .animate({opacity: 1}, 1000, function() {
        });

}


var start = setInterval(function() {
slideSwitch();
}, 4000 );



$('.bannerindicator:nth-of-type(1)').click(function (){

var $one = $('.bannercontainer IMG:nth-of-type(1)');
var $onei = $('.bannerindicator:nth-of-type(1)');
var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

if($onei.hasClass('active')) {
} else {

clearInterval(start);

$indicator.animate({opacity: 0.2}, 1000, function() {
         $indicator.removeClass('active');
        });

$active.animate({opacity: 0}, 1000, function() {
        $active.removeClass('active');
        });

$onei.addClass('active'), 10, function() {
    $onei.animate({opacity: 1}, 1000
    )};

$one.css({opacity: 0})
     .addClass('active')
     .animate({opacity: 1}, 1000, function() {
        }); 
    }   
});


$('.bannerindicator:nth-of-type(2)').click(function (){

var $two = $('.bannercontainer IMG:nth-of-type(2)');
var $twoi = $('.bannerindicator:nth-of-type(2)');
var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

if($twoi.hasClass('active')) {
} else {

clearInterval(start);

$indicator.animate({opacity: 0.2}, 1000, function() {
         $indicator.removeClass('active');
        });

$active.animate({opacity: 0}, 1000, function() {
        $active.removeClass('active');
        });

$twoi.addClass('active'), 10, function() {
    $twoi.animate({opacity: 1}, 1000
    )};

$two.css({opacity: 0})
     .addClass('active')
     .animate({opacity: 1}, 1000, function() {
        }); 
    }   
});


$('.bannerindicator:nth-of-type(3)').click(function (){

var $three = $('.bannercontainer IMG:nth-of-type(3)');
var $threei = $('.bannerindicator:nth-of-type(3)');
var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

if($threei.hasClass('active')) {
} else {

clearInterval(start);

$indicator.animate({opacity: 0.2}, 1000, function() {
         $indicator.removeClass('active');
        });

$active.animate({opacity: 0}, 1000, function() {
        $active.removeClass('active');
        });

$threei.addClass('active'), 10, function() {
    $threei.animate({opacity: 1}, 1000
    )}; 

$three.css({opacity: 0})
     .addClass('active')
     .animate({opacity: 1}, 1000, function() {
        }); 
    }
});

我制作了一个 JSFiddle（没有图像，无论如何图像都可以正常工作）：

https://jsfiddle.net/zh1mykzp/

如果有人能快速浏览一下这段代码，我将不胜感激。我还是个新手，所以我相信解决方案很明显..

提前致谢。

Answer 1

在每个 .animate 方法中使用此 .stop(true,true).animate

这将在触发新动画时使同一元素上所有挂起和未完成的动画出队。否则所有（新）动画将按 jquery 排队，并且预期的同步将丢失。

Answer 2

希望这就是您所期待的...

https://jsfiddle.net/DivakarDass/zh1mykzp/4/

工作 JSFiddle。看看这个。

function slideSwitch() {

    var $active = $('.bannercontainer IMG.active');
    var $indicator = $('.bannerindicator.active');
    
     if ( $active.length == 0 ) $active = $('.bannercontainer IMG:last');
     
     if ( $indicator.length == 0 ) $indicator = $('.bannerindicator:last');
    
    var $next = $active.next().length ? $active.next()
     : $('.bannercontainer img:first');    
  
   var $nexti = $indicator.next().length ? $indicator.next()
    : $('.bannerindicator:first');
    
    $next.addClass('active');
     
        $nexti.animate({opacity: 1}, 1000, function() {
     $nexti.addClass('active');
      }); 
            
     $active.animate({opacity: 0}, 1000, function() {
      $active.removeClass('active');
      });
    
    $indicator.animate({opacity: 0.2}, 1000, function() {
      $indicator.removeClass('active');
      });
    
    $next.css({opacity: 0})
      .addClass('active')
      .animate({opacity: 1}, 1000, function() {
      });
      
}


var start = setInterval(function() {
 slideSwitch();
 }, 4000 );
 


$('.bannerindicator:nth-of-type(1)').click(function (){

var $one = $('.bannercontainer IMG:nth-of-type(1)');
var $onei = $('.bannerindicator:nth-of-type(1)');
var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

 if($onei.hasClass('active')) {
 } else {

 clearInterval(start);

 $('.bannerindicator').removeClass('active').css({opacity: 0.2});
    $(this).addClass('active');
    $('.bannerindicator.active').stop(true,true)
    .animate({opacity: 1}, 500, function() {                 
      });
 $active.animate({opacity: 0}, 1000, function() {
      $active.removeClass('active');
      });
      
    $onei.addClass('active'), 10, function() {
     $onei.animate({opacity: 1}, 1000
     )};
    
    $one.css({opacity: 0})
      .addClass('active')
      .animate({opacity: 1}, 1000, function() {
      }); 
     }
    
});


$('.bannerindicator:nth-of-type(2)').click(function (){    

var $two = $('.bannercontainer IMG:nth-of-type(2)');
var $twoi = $('.bannerindicator:nth-of-type(2)');
var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

 if($twoi.hasClass('active')) {
 } else {

 clearInterval(start);

 $('.bannerindicator').removeClass('active').css({opacity: 0.2});
    $(this).addClass('active');
    $('.bannerindicator.active').stop(true,true)
    .animate({opacity: 1}, 500, function() {         
      });    
 
 $active.animate({opacity: 0}, 1000, function() {
      $active.removeClass('active');
      });
      
    $twoi.addClass('active'), 10, function() {
     $twoi.animate({opacity: 1}, 1000
     )};
    
    $two.css({opacity: 0})
      .addClass('active')
      .animate({opacity: 1}, 1000, function() {
      }); 
     }    
});


$('.bannerindicator:nth-of-type(3)').click(function (){

var $three = $('.bannercontainer IMG:nth-of-type(3)');
var $threei = $('.bannerindicator:nth-of-type(3)');
var $active = $('.bannercontainer IMG.active');
var $indicator = $('.bannerindicator.active');

 if($threei.hasClass('active')) {
 } else {

 clearInterval(start);

 $('.bannerindicator').removeClass('active').css({opacity: 0.2});
    $(this).addClass('active');
    $('.bannerindicator.active').stop(true,true)
    .animate({opacity: 1}, 500, function() {        
      });    
 
 $active.animate({opacity: 0}, 1000, function() {
      $active.removeClass('active');
      });
      
    $threei.addClass('active'), 10, function() {
     $threei.animate({opacity: 1}, 1000
     )}; 
    
    $three.css({opacity: 0})
      .addClass('active')
      .animate({opacity: 1}, 1000, function() {
      }); 
     }
});

.indicator {

position: relative;
display: block;
margin: auto;
width: 160px;
left: 18px;
top: -25px;
z-index: 11;

}

.bannerindicator {
opacity:0.2;
height: 15px;
width: 15px;
border-radius: 20px;
display: inline-block;
background-color: #424b4d;
opacity: 0.2;
margin-left: 20px;
}

.bannerindicator.active {

opacity: 1;

}

.bannerindicator:hover {

opacity: 0.3;

}

.bannercontainer {

position: relative;
height: 390px;
border-bottom: 1px solid #CACACA;

}


.bannercontainer IMG {
    position:absolute;
    top:0;
    left:50%;
    margin-left: -480px;
    z-index:8;
    display: none;
}

.bannercontainer IMG.active {
    z-index:10;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<body>
<div class="bannercontainer">
 <img src="Graphics/promotional/LONE28TH.png" alt="" class="active"/>
 <img src="Graphics/promotional/rustie.png" alt=""/>        
  <img src="Graphics/promotional/yungcover.png" alt=""/>  
</div>
<div class="indicator"><div class="bannerindicator active"></div><div class="bannerindicator"></div><div class="bannerindicator"></div></div>

试图解决 jquery 滑块控件中的这个错误

trying to solve this bug in jquery slider controls

javascript

jquery

slider

slideshow