jQueryシンプルスライドショーをクリックして発行する

Question

jQueryを使用して画像スライドショーを作成しようとしています。私は4写真、前のボタンと次のボタンを持っています。前と次のボタンが機能しており、画像を移動しています - = 400pxと+ = 400px。しかし、私は最初の写真にいるときに、ユーザーが前のボタンをクリックして最後の写真を撮って、最後の写真にいるときに次のボタンをクリックして最初の写真を撮るときは好きです。うまくいけば誰かが問題を助けることができる

ありがとう。

HTMLコード：

<div class="images"> 
     <div class="images_inside"> 
      <img src="imgs/model_01.jpg"> 
      <img src="imgs/model_02.jpg"> 
      <img src="imgs/model_04.jpg"> 
      <img src="imgs/model_05.jpg"> 
     </div> 
    </div> 

CSSコード：

.images { 
    width:400px; 
    height:400px; 
    border:1px solid #000000; 
    overflow: hidden; 
} 

.images_inside { 
    width:1600px; 
    height:400px; 
} 

.images img { 
    width:400px; 
    height:400px; 
    float:left; 
} 

のjQueryコード：

$(".next").on("click", function(){ 
    var $a = $(".images .images_inside").css("margin-left", "-=400px"); 
}); 

$(".prev").on("click", function(){ 
    var $b = $(".images .images_inside").css("margin-left", "+=400px"); 
}); 

Answer 1

関与数学は非常に簡単です、
は、スライドのtot数を計算し、counter

var $gallery = $(".images_inside"), 
 
    tot = $("> *", $gallery).length, 
 
    counter = 0; 
 

 
$(".prev, .next").on("click", function() { 
 

 
    // Increment/decrement the counter depending on the clicked button: 
 
    counter = $(this).hasClass("next") ? ++counter : --counter; 
 
    // Let's fix the counter loop 
 
    counter = counter<0 ? tot-1 : counter%tot; 
 

 
    // Finally ainmate your gallery using CSS! 
 
    $gallery.css({ 
 
     transition: "0.5s", 
 
     transform: "translateX(-"+ (100*counter) +"%)" 
 
    }); 
 

 
});

.images {overflow:hidden; white-space: nowrap; font-size:0;} 
 
.images_inside>* {width: 100%;display: inline-block; vertical-align:top;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <div class="images_inside"> 
 
    <img src="//placehold.it/400x80/cf5?text=1"> 
 
    <img src="//placehold.it/400x80/f5c?text=2"> 
 
    <img src="//placehold.it/400x80/5ff?text=3"> 
 
    <img src="//placehold.it/400x80/fc5?text=4"> 
 
    </div> 
 
</div> 
 
<button class="prev">&larr;</button> 
 
<button class="next">&rarr;</button>

jsBin demo (compact code version)

Answer 2

あなたは、あなたがどの画像を知っているように更新することができますグローバルJS変数を作ることができますユーザーは現在オンです。次にon click関数で変数を見て、最初のイメージにあり、前のをクリックしている場合、マージンを別の方法で更新して最後のイメージにジャンプします。最後の画像の次のボタンと同じです。

Answer 3

私が理解したように、あなたはかなりjQueryを使い慣れています。

これを達成しようとしている方法は、動作させる場合でも間違っています。

this websiteを見て、いくつかのjQueryプラグインを使用することをお勧めします。

ウェブサイトには、下に自分で達成する方法の例もあります。