シンプルなJQueryスライダが正しく動作しない

Question

jQueryとjavascriptが新しく、私は新しいスキルを実践するためにいくつかのアニメーションに取り組んでいます。次のコードは、setInterval（）を使用して4つのスライドを循環させ、クリック時に移動できる単純なスライダです。最初または最後のスライドがアクティブでボタンがクリックされている場合を除いて、スライダは正常に動作します。この場合、スライダは空白のスライドを表示してからサイクリングします。私は余白 - 左が-2880pxに等しいときに、成功なしにクリックでulを操作しようとしました。ここに私のコードは次のとおりです。

var i = 0; 
 

 
$(document).ready(function() { 
 
    setInterval(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
 
    \t i++; 
 
    \t if(i === 4) { 
 
      i = 0; 
 
      $("#my-slider").css("margin-left", 0); 
 
    \t } 
 
    }); 
 
    }, 5000); 
 
    }) 
 
    $(document).ready(function() { 
 
$(".right").click(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000); 
 
}); 
 

 
$(".left").click(function() { 
 
\t $("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
 
    }); 
 
});

.slider-wrapper { 
 
\t width: 50%; 
 
\t height: 400px; 
 
\t margin: 0 auto; 
 
\t overflow: hidden; 
 
} 
 

 
.slider-wrapper ul { 
 
\t list-style-type: none; 
 
\t width: 3600px; 
 
\t max-width: 3600px; 
 
\t height: 400px; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.slider-wrapper li { 
 
\t float: left; 
 
\t width: 720px; 
 
\t height: 400px; 
 
} 
 

 
#slide1 { 
 
background: #04151F; 
 
} 
 

 
#slide2 { 
 
\t background: #183A37; 
 
} 
 

 
#slide3 { 
 
\t background: #EFD6AC; 
 
} 
 

 
#slide4 { 
 
\t background: #C44900; 
 
} 
 

 
#slide5 { 
 
\t background: #04151F; 
 
} 
 

 
.left, .right { 
 
\t font-size: 40px; 
 
\t z-index: 1; 
 
\t position: fixed; 
 
\t float: right; 
 
\t margin: -15% 0 0 0.5%; 
 
\t cursor: pointer; 
 
\t color: #FFF; 
 
} 
 

 
.right { 
 
\t margin-left: 47%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider-wrapper"> 
 
\t <ul id="my-slider"> 
 
\t \t <li id="slide1"></li> 
 
\t \t <li id="slide2"></li> 
 
\t \t <li id="slide3"></li> 
 
\t \t <li id="slide4"></li> 
 
\t \t <li id="slide5"></li> 
 
\t </ul> 
 
\t <p class="left">&larr;</p> 
 
\t <p class="right">&rarr;</p> 
 
</div>

あなたの助けをいただき、ありがとうございます。

Answer 1

私はそれが最も簡単な解決策だと思っています！

https://jsfiddle.net/nbLz6zzb/1/

var i = 0; 
 

 
$(document).ready(function() { 
 

 
    setInterval(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
 
     i++; 
 
     if(i === 4) { 
 
      i = 0; 
 
      $("#my-slider").css("margin-left", 0); 
 
     } 
 
    }); 
 
    }, 5000); 
 

 

 
///////////////////////////////////// 
 

 
$(".right").click(function() { 
 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
 
     i++; 
 
     if(i === 4) { 
 
      i = 1; 
 
      $("#my-slider").css("margin-left", 0); 
 
     } 
 
    });  
 
}); 
 

 
$(".left").click(function() { 
 

 
\t if ($("#my-slider").css("margin-left") <= '720px' && $("#my-slider").css("margin-left") >= '0px') { 
 
\t \t $("#my-slider").animate({"margin-left": "-2880px"}, 1000); 
 
\t } else { 
 
\t \t $("#my-slider").animate({"margin-left": "+=720px"}, 1000); 
 
\t } 
 

 
    }); 
 

 

 
});

.slider-wrapper { 
 
width: 50%; 
 
height: 400px; 
 
margin: 0 auto; 
 
overflow: hidden; 
 
} 
 

 
.slider-wrapper ul { 
 
list-style-type: none; 
 
width: 3600px; 
 
max-width: 3600px; 
 
height: 400px; 
 
padding: 0; 
 
margin: 0; 
 
} 
 

 
.slider-wrapper li { 
 
float: left; 
 
width: 720px; 
 
height: 400px; 
 
} 
 

 
#slide1 { 
 
background: #04151F; 
 
} 
 

 
#slide2 { 
 
background: #183A37; 
 
} 
 

 
#slide3 { 
 
background: #EFD6AC; 
 
} 
 

 
#slide4 { 
 
background: #C44900; 
 
} 
 

 
#slide5 { 
 
background: #04151F; 
 
} 
 

 
.left, .right { 
 
font-size: 40px; 
 
z-index: 1; 
 
position: fixed; 
 
float: right; 
 
margin: -15% 0 0 0.5%; 
 
cursor: pointer; 
 
color: #FFF; 
 
} 
 

 
.right { 
 
margin-left: 47%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider-wrapper"> 
 
<ul id="my-slider"> 
 
    <li id="slide1"></li> 
 
    <li id="slide2"></li> 
 
    <li id="slide3"></li> 
 
    <li id="slide4"></li> 
 
    <li id="slide5"></li> 
 
</ul> 
 
<p class="left">&larr;</p> 
 
<p class="right">&rarr;</p> 
 
</div>

Answer 2

ボタンのサイクルのコードも使用する必要があります。

$(document).ready(function() { 
$(".right").click(function() { 
    $("#my-slider").animate({"margin-left": "-=720px"}, 1000, function(){ 
    i++; 
     if(i === 4) { 
      i = 0; 
      $("#my-slider").css("margin-left", 0); 
     } 
    }); 
});