javascript - 如何使用 jQuery 在点击时移动图片

Question

我正在尝试使用 jQuery 将图片向左移动。我正在使用 while 语句来更改所有图片。这是我的代码:

<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 在这里:

图像变换

左移 图片

     <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

简单地将第一个图像附加回其父图像可能会更容易。这应该删除它并将其添加回作为最后一个子项。在演示中，每个图像都有一个边框，以便您可以看到正在发生的情况。我猜这就是您所追求的，但如果不是，请告诉我。

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>