jQuery Einfache Slideshow auf Klick-Problem

Question

Ich versuche, Bild-Diashow mit jQuery zu erstellen. Ich habe 4 Fotos, eine vorherige Schaltfläche und eine nächste Schaltfläche. Der vorherige und der nächste Knopf funktionieren und sie bewegen die Bilder - = 400px und + = 400px. Allerdings möchte ich, wenn ich auf dem ersten Foto bin und der Benutzer auf die vorherige Schaltfläche klickt, um ihn zum letzten Foto zu bringen, und wenn der Benutzer auf dem letzten Foto ist und auf die nächste Schaltfläche klickt, um ihn zum ersten Foto zu bringen. Hoffentlich kann jemand mit dem Problem helfen

Danke.

HTML-Code:

<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-Code:

.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-Code:

$(".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

Die Mathematik beteiligt ist ganz einfach,
Berechnen Sie die tot Anzahl von Dias und verwenden ein 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

Sie eine globale JS Variable machen können Sie aktualisieren können, wissen lassen, welches Bild Der Benutzer ist gerade angemeldet. Dann in Ihrer on click Funktion sehen Sie sich die Variable an und wenn Sie auf dem ersten Bild sind und Sie auf vorher klicken, aktualisieren Sie den Rand anders, um zum letzten Bild zu springen. Gleiches gilt für die nächste Schaltfläche auf dem letzten Bild.

Answer 3

Wie ich verstanden habe, sind Sie ziemlich frisch mit jQuery.

Die Art, wie Sie dies versuchen, ist falsch, auch wenn Sie es zur Arbeit bringen.

Ich würde vorschlagen, dass Sie sich this website ansehen und ein jQuery-Plug-in verwenden.

Die Website hat auch verschiedene Beispiele, wie Sie es am Ende selbst erreichen können.