So verschieben Sie Bilder beim Klicken mit jQuery

Question

Ich versuche, meine Bilder mit jQuery nach links zu verschieben. Ich verwende eine while-Anweisung, um alle Bilder zu ändern. Hier ist mein Code:

<script language="javascript"> 
$(function() { 
$("#leftButton").click(function() { 
    var imglength = $("#content").children("img").length; 
    var iterations = imglength; 
    var lastimg = imglength-1; 
    var nextimg = lastimg-1; 
    var start = 1; 
    var text = ""; 
    document.getElementById("Number").innerHTML="The number of pictures is " + imglength;  
    document.getElementById("Number1").innerHTML="The index of the last image is " + lastimg;  

    while (start < iterations) 
     { 
     var last = $("img:eq('lastimg')").attr("src"); 
     var next = $("img:eq('nextimg')").attr("src"); 
     text += "<br>Iteration: " + imgindex + " and nextimg is:" +nextimg; 
     $("img:eq('lastimg')").attr('src', next); 
     start++; 
     nextimg--; 
     } 
     document.getElementById("Number2").innerHTML = text; 
    }) 
    }) 
</script> 

HTML ist hier:

Imgae Shift-

Shift links Bilder

 <p id="Number">Number</p> 
    <p id="Number1">Number</p> 
    <p id="Number2">Number</p> 

    <div id="result"></div> 
    </section> 
    </section> 
<footer> 
    &copy; Matthew King: 2015, Birmingham, AL 35211 
</footer> 
</body> 
</html> 

Answer 1

Es könnte einfacher sein, das erste Bild einfach an sein Elternelement anzuhängen. Diese sollte entfernen Sie es und fügen Sie es als das letzte Kind zurück. In der Demo hat jedes Bild einen Rahmen, so dass Sie sehen können, was passiert. Ich schätze, das ist es, wonach Sie suchen, aber wenn nicht, lassen Sie es mich wissen.

function slideKittens(){ 
 
    var first = document.querySelector("#kittens > img"); 
 
    first.parentNode.appendChild(first); 
 
} 
 

 
setInterval(slideKittens, 1 * 1000);

#kittens img { 
 
    border: solid 2px black; 
 
    margin: 2px; 
 
    padding: 0px; 
 
    display: inline-block; 
 
    float: left; 
 
}

<div id="kittens" style="overflow: hidden; width:333px; height: 108px"> 
 
    <img src="http://placekitten.com/100/100" style="border-color: black;" /> 
 
    <img src="http://placekitten.com/100/100" style="border-color: red;" /> 
 
    <img src="http://placekitten.com/100/100" style="border-color: green;" /> 
 
    <img src="http://placekitten.com/100/100" style="border-color: blue;" /> 
 
</div>

Answer 2

Das Problem ist, dass Sie die Variablen nicht korrekt verwenden.

Die Linien

var last = $("img:eq('lastimg')").attr("src"); 
var next = $("img:eq('nextimg')").attr("src"); 
$("img:eq('lastimg')").attr('src', next); 

sollte

var last = $("img:eq('" + lastimg + "')").attr("src"); 
var next = $("img:eq('" + nextimg+ "')").attr("src"); 
$("img:eq('" + lastimg +"')").attr('src', next);