Question

我试图制作一个包含3个图像和3个子弹的简单滑块。我的问题是，当我使用jquery .animate转到下一个项目时，它第一次正常工作，但第二次显示我在第一个位置有延迟，这使得jquery .animate在其他子弹中被延迟。我的代码在JSFiddle中https://jsfiddle.net/Lqpj7sx1/

我在StackOverflow片段中的代码：

＆＃13;

	$(document).ready(function(){


		//Encuentro la cantidad de imagenes
		var cantImagenes = $('#imagenes img').length;


		//Genero los bullets de acuerdo a la cantidad de imagenes
		for(var i = 0; i < cantImagenes; i++)
		{			
			$("#bullets").append("<span class='bullet' id=" + i + "></span>");
			$('#bullets #0').addClass("seleccion");
			var cantBullet = $("span.bullet").length;
		}	

		var currentBullet = 0;

		function animacion(){

			$("#texto3").slideDown(4000, function(){
				$("#texto3").css("display", "none")
				$("#texto2").slideDown(4000, function(){
					$("#texto2").css("display", "none")
					$("#texto1").slideDown(4000, function(){
						$("#texto1").css("display", "none")
						
			})})});

			for(i = 0; i < cantBullet; i++)
			{				
				$("#bullets").animate({"left": "+=600px"}, 4000, function(){									
					$("#bullets #"+currentBullet).removeClass("seleccion");					
					currentBullet = currentBullet + 1;
					$("#bullets #"+currentBullet).addClass("seleccion");
						if(currentBullet > cantBullet){	
							currentBullet = 0;
							$("#bullets #"+currentBullet).addClass("seleccion");
						}
				});	
			} 
			
			$("#foto3").animate({"left": "+=600px"}, 4000, function(){
				$("#foto2").animate({"left": "+=600px"}, 4000, function(){
					$("#foto1").animate({"left": "+=600px"}, 4000, function(){
						$("#foto3").css("left", "0")
						$("#foto2").css("left", "0")
						$("#foto1").css("left", "0")
						
						animacion();
			})})});

		}


		animacion();




	});

＆＃13;

	#imagenes{
		width: 600px;
		height: 450px;
		border: 1px solid grey;
		position: relative;
		overflow: hidden;
		background-image: url(http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg)
	}
	#foto1, #foto2, #foto3{
		display: block;
		position: absolute;
	}
	#texto1, #texto2, #texto3{
		display: none;
		position: absolute;
		text-align: center;
		width: 600px;
		height: 30px;
		padding-top: 10px;
		vertical-align: bottom;
		background-color: #000000;
		color: #FFFFFF;
		opacity: 0.3;
		filter: alpha(opacity=30);
	}
	.bullet
	{
		width: 20px;
		height: 20px;
		border:3px solid #000;
		margin-right: 10px;
		display: inline-block;

	}
	.seleccion
	{
		background: #ccc;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h2>Slider</h2>
<div id="imagenes">
    <img src="https://www.koi-nya.net/img/subidos_posts/2016/08/PS4-Slim_08-21-16_006-600x450.jpg" id="foto1" />
    <img src="https://www.euroresidentes.com/estilo-de-vida/moda-estilo/wp-content/uploads/sites/15/2014/09/collage-leggings.jpg" id="foto2" />
    <img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg" id="foto3" />
    <div id="texto1">Picture 1</div>
    <div id="texto2">Picture 2</div>
    <div id="texto3">Picture 3</div>   
</div>
<div id="bullets"></div>

＆＃13;

我的问题具体如下：

for(i = 0; i < cantBullet; i++)
            {               
                $("#bullets").animate({"left": "+=600px"}, 4000, function(){                                    
                    $("#bullets #"+currentBullet).removeClass("seleccion");                 
                    currentBullet = currentBullet + 1;
                    $("#bullets #"+currentBullet).addClass("seleccion");
                        if(currentBullet > cantBullet){ 
                            currentBullet = 0;
                            $("#bullets #"+currentBullet).addClass("seleccion");
                        }
                }); 
            }

我希望有人可以帮助我！谢谢！

Answer 1

检查[https://jsfiddle.net/8hoo7tc9/] 实际上，循环没有正确设置

  [1]: https://jsfiddle.net/8hoo7tc9/

使用if条件延迟jquery动画

1 个答案: