Question

我正在创建一个样本静态滑块，其左右分别为20％div（显示下一张或上一张幻灯片的一部分的空间），以及包含主幻灯片的中心60％;

所以，滑块必须像

一样

| 20％| 60％主幻灯片| 20％| ：我必须保持这些百分比不变。

当点击一次时，everthing工作正常，否则当我点击其中一个div更多然后同时点击主滑块应该只移动60％（向右或向左）但它触发多一个调用所以主滑动移动随便！

如何防止多次点击功能调用，直到完成广告。

代码段：

$(document).ready(function(){
	
	$("#slide-right").on( "click", function(event){
		event.stopImmediatePropagation
		slide('right');
	});
	
	$("#slide-left").on( "click", function(event){
		event.stopImmediatePropagation
		slide('left');
	});
});

function slide(direction){
	
	var slider_width = $("#slide_container").width();
	$( ".slide" ).each(function( index ) {
		var elmnt_left = $(this).position().left;
		//alert(this.id)
		
		var val = 100 * elmnt_left / slider_width;
		var percentage = 0;
		
		// direction slide to left
		if(direction == 'left'){
			if(index == 0) {
				if(val > -100)
					percentage = val - 60;
			}			
			else if(index == 1) {
				if(val > -40)
					percentage = val - 60;
			}				
			else if(index == 2){
				if(val > 20)
					percentage = val - 60;
			}
		}else if (direction == 'right'){ // direction slide to right
			if(index == 0) {
				if(val < 20 )
					percentage = val + 60;
			}			
			else if(index == 1) {
				if(val < 80)
					percentage = val + 60;
			}				
			else if(index == 2){
				if(val < 140)
					percentage = val + 60;
			}
		}	
		
		console.log()
		
		if(percentage !== 0){	
			$( this ).animate({
				left: percentage+'%'
			}, 400, function() {
				// Animation complete.
				
			});
		}
		
	});
};

html,body {
	width:100%;
	height:100%;
	margin:0px;
}

.main{
	width:100%;
}

#slide_container{
	position:relative;
	width:100%;
	height:300px;
	overflow:hidden;
	text-align:center;
}

#slide_container .slide {
	position:absolute;
	width: 60%;
	border:0px solid #ccc;
	height:100%;
	display:inline-block;
	margin:0;
	opacity:0.7;
}

#slide_container .slide1 {
	background-color:green;
	left:20%;
}

#slide_container .slide2 {
	background-color:gray;
	left:80%;
	
}

#slide_container .slide3 {
	background-color:pink;
	left:140%;
	
}


#slide_container  #slide-left {
	display:inline-block;
	height: 100%;
	width: 20%;
	left:0;
	position:absolute;
	z-index:100;
}

#slide_container  #slide-right {
	display:inline-block;
	height: 100%;
	width: 20%;
	right:0;
	position:absolute;
	z-index:100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<div class="main">
		<div id="slide_container">
			<span id="slide-left"></span>
			<span id="slide-right"></span>
			<div>
				<div class="slide slide1" id="1" ></div>
				<div class="slide slide2" id="2" ></div>
				<div class="slide slide3" id="3" ></div>
			</div>
		</div>
	</div>

Answer 1

如何防止多次点击功能调用直到完成广告？

伪代码：

$("#next").on("click", function(){
   if( $("#slider").is(":animated") ) return;
   // animation logic here
});

Answer 2

您还可以在动画开始时在容器中添加一个类，并在动画结束时删除该类。因此，此类仅在动画发生时出现。

执行c函数时，您可以检查该类是否存在，如果存在，则返回false。

slide

Answer 3

if(percentage !== 0 && !window.animating)
{   
        $( this ).animate({
            left: percentage+'%'
        }, {
             start: function(){
                window.animating = true;
             },
             complete: function(){
                window.animating = false;
             }
         });
    }

在我看来，在window这样的“全局”内容中添加一个var就可以了。

JQuery停止多个Annimation

3 个答案: