Question

非常に単純なjQueryスライダを作成しようとしましたが、slide1は最後のイメージには移動しません。それは負のダイレクトン-1 -2 -3 -4でループしているようです。

$(".btnPrev").click(function() { 
$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function() { 
     if (--currentSlide === $slides.length) { 
      currentSlide = 1; 
      $slideContainer.css('margin-left', 0); 
     } 
    }); 
}); 

誰かがこの問題を解決できますか？あなたがcurrentslide--前margin-leftを適用するため

Codepen

Answer 1

あなたの問題があります。モジュロで関数ループを追加しました。

てみてください：

$(function() { 
 

 
    //settings for slider 
 
    var width = 400; 
 
    var animationSpeed = 1000; 
 
    var currentSlide = 1; 
 
    var ifClick = 0; 
 

 

 
    //cache DOM elements 
 
    var $slider = $('#slider'); 
 
    var $slideContainer = $('.slides', $slider); 
 
    var $slides = $('.slide', $slider); 
 

 

 
    $(".btnNext").click(function() { 
 
    if(ifClick == 0){ 
 
     ifClick = 1; 
 
     $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() { 
 
      if (currentSlide++ === $slides.length-1) { 
 
       currentSlide = 1; 
 
       $slideContainer.css('margin-left', 0); 
 
      } 
 
      ifClick = 0; 
 
     }); 
 
    } 
 
    }); 
 

 
    $(".btnPrev").click(function() { 
 
    if(ifClick == 0){ 
 
     ifClick = 1; 
 
     currentSlide--; 
 
     if (currentSlide % $slides.length == 0) { 
 
      currentSlide = $slides.length-1; 
 
      $slideContainer.css('margin-left', -(width*($slides.length-1))); 
 
      $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){ifClick=0}) 
 
     }else{ 
 
      $slideContainer.animate({'margin-left': '+='+width}, animationSpeed,function(){ifClick=0}) 
 
     } 
 
    } 
 
    }); 
 

 
});

body {font-family: helvetica;} 
 

 
#slider { 
 
     width: 400px; 
 
     height: 200px; 
 
     overflow: hidden; 
 
    } 
 

 
    #slider .slides { 
 
     display: block; 
 
     width: 2400px; 
 
     height: 200px; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    #slider .slide { 
 
     float: left; 
 
     list-style-type: none; 
 
     width: 400px; 
 
     height: 200px; 
 
    } 
 

 
    /* helper css, since we don't have images */ 
 
    .slide1 {background: red;} 
 
    .slide2 {background: blue;} 
 
    .slide3 {background: green;} 
 
    .slide4 {background: purple;} 
 
    .slide5 {background: pink;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 

 
    <div class="header"> 
 
    <h1 class="text-muted">jQuery Basic Slider</h1> 
 
    </div> 
 

 
    <div id="slider"> 
 
    <ul class="slides"> 
 
     <li class="slide slide1">slide1</li> 
 
     <li class="slide slide2">slide2</li> 
 
     <li class="slide slide3">slide3</li> 
 
     <li class="slide slide4">slide4</li> 
 
     <li class="slide slide5">slide5</li> 
 
     <li class="slide slide1">slide1</li> 
 
    </ul> 
 
    </div> 
 

 

 
    <button class="btnPrev">Previous</button> 
 
    <button class="btnNext">Next</button> 
 

 
</div>