0
私は3つの画像と3つの箇条書きで簡単なスライダーを作ろうとしています。私の問題は、jquery .animateを使用して次の箇条書きに移動するとき、最初は正しく動作しますが、2番目の時間は遅れて最初の位置に表示されるため、jquery.animateが他の箇条書きで遅れることがあります。 マイJSFiddle https://jsfiddle.net/Lqpj7sx1/のコードjqueryの遅延は条件付きでアニメーションする
StackOverflowのスニペットで私のコード：
\t $(document).ready(function(){
\t \t //Encuentro la cantidad de imagenes
\t \t var cantImagenes = $('#imagenes img').length;
\t \t //Genero los bullets de acuerdo a la cantidad de imagenes
\t \t for(var i = 0; i < cantImagenes; i++)
\t \t { \t \t \t
\t \t \t $("#bullets").append("<span class='bullet' id=" + i + "></span>");
\t \t \t $('#bullets #0').addClass("seleccion");
\t \t \t var cantBullet = $("span.bullet").length;
\t \t } \t
\t \t var currentBullet = 0;
\t \t function animacion(){
\t \t \t $("#texto3").slideDown(4000, function(){
\t \t \t \t $("#texto3").css("display", "none")
\t \t \t \t $("#texto2").slideDown(4000, function(){
\t \t \t \t \t $("#texto2").css("display", "none")
\t \t \t \t \t $("#texto1").slideDown(4000, function(){
\t \t \t \t \t \t $("#texto1").css("display", "none")
\t \t \t \t \t \t
\t \t \t })})});
\t \t \t for(i = 0; i < cantBullet; i++)
\t \t \t { \t \t \t \t
\t \t \t \t $("#bullets").animate({"left": "+=600px"}, 4000, function(){ \t \t \t \t \t \t \t \t \t
\t \t \t \t \t $("#bullets #"+currentBullet).removeClass("seleccion"); \t \t \t \t \t
\t \t \t \t \t currentBullet = currentBullet + 1;
\t \t \t \t \t $("#bullets #"+currentBullet).addClass("seleccion");
\t \t \t \t \t \t if(currentBullet > cantBullet){ \t
\t \t \t \t \t \t \t currentBullet = 0;
\t \t \t \t \t \t \t $("#bullets #"+currentBullet).addClass("seleccion");
\t \t \t \t \t \t }
\t \t \t \t }); \t
\t \t \t }
\t \t \t
\t \t \t $("#foto3").animate({"left": "+=600px"}, 4000, function(){
\t \t \t \t $("#foto2").animate({"left": "+=600px"}, 4000, function(){
\t \t \t \t \t $("#foto1").animate({"left": "+=600px"}, 4000, function(){
\t \t \t \t \t \t $("#foto3").css("left", "0")
\t \t \t \t \t \t $("#foto2").css("left", "0")
\t \t \t \t \t \t $("#foto1").css("left", "0")
\t \t \t \t \t \t
\t \t \t \t \t \t animacion();
\t \t \t })})});
\t \t }
\t \t animacion();
\t });\t #imagenes{
\t \t width: 600px;
\t \t height: 450px;
\t \t border: 1px solid grey;
\t \t position: relative;
\t \t overflow: hidden;
\t \t background-image: url(http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg)
\t }
\t #foto1, #foto2, #foto3{
\t \t display: block;
\t \t position: absolute;
\t }
\t #texto1, #texto2, #texto3{
\t \t display: none;
\t \t position: absolute;
\t \t text-align: center;
\t \t width: 600px;
\t \t height: 30px;
\t \t padding-top: 10px;
\t \t vertical-align: bottom;
\t \t background-color: #000000;
\t \t color: #FFFFFF;
\t \t opacity: 0.3;
\t \t filter: alpha(opacity=30);
\t }
\t .bullet
\t {
\t \t width: 20px;
\t \t height: 20px;
\t \t border:3px solid #000;
\t \t margin-right: 10px;
\t \t display: inline-block;
\t }
\t .seleccion
\t {
\t \t background: #ccc;
\t }<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>私の問題は、これらの行で、具体的である：
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");
}
});
}
私は、誰かが私を助けることを願って！ありがとうございました！
に設定されていないチェックあなたはフィドルに追加することができます –
こんにちは@ DashangG.Makwana https://jsfiddle.net/Lqpj7sx1/ – Emily