Imgae Shift

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

Imgae Shift

左移图片

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

Answer 2

问题是您没有正确使用变量。

行

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

应该是

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

如何使用jQuery在点击上移动图片

Imgae Shift

2 个答案: