dimanche 12 juin 2016

How to shift pictures on click using jquery

I am trying to shift my pictures to the left using jQuery. I am using a while statement to change all pictures. Here is my 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 is here:

Imgae Shift

Left Shift Pictures
     <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>

Aucun commentaire:

Enregistrer un commentaire