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。看看这个。

＆＃13;

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() {
    		});	
    	}
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

试图在jquery滑块控件中解决这个bug

2 个答案: