admin管理员组

文章数量:1418861

im fairly new to javascript, but im basically trying to make a next/previous click through gallery. I've managed to find tutorials and bits to get images to click through. however i cant seem to work out how to return to the beginning of the series after the 4th(final) image.

this is what i have so far-

<script type="text/javascript">

 var photos=new Array()
 var which=0
 photos[0]='images/image1.jpg'
 photos[1]='images/image2.jpg'
 photos[2]='images/image3.jpg'
 photos[3]='images/image4.jpg'

 function backward(){
    if (which > 0){
        which=which-1
        document.images.photoslider.src=photos[which]
    }
 }

 function forward(){
     if (which<photos.length-1){
        which=which+1
        document.images.photoslider.src=photos[which]
     }
 }

 </script>

 <form>
     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 
     <input type="button" value="Next&gt;&gt;" onClick="forward()">
 </form>

essentially I want the buttons to create a continuous loop through the 4 images. I know there is going to be a simple solution I just cant see it. Any help would be great! thank you in advance!

im fairly new to javascript, but im basically trying to make a next/previous click through gallery. I've managed to find tutorials and bits to get images to click through. however i cant seem to work out how to return to the beginning of the series after the 4th(final) image.

this is what i have so far-

<script type="text/javascript">

 var photos=new Array()
 var which=0
 photos[0]='images/image1.jpg'
 photos[1]='images/image2.jpg'
 photos[2]='images/image3.jpg'
 photos[3]='images/image4.jpg'

 function backward(){
    if (which > 0){
        which=which-1
        document.images.photoslider.src=photos[which]
    }
 }

 function forward(){
     if (which<photos.length-1){
        which=which+1
        document.images.photoslider.src=photos[which]
     }
 }

 </script>

 <form>
     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 
     <input type="button" value="Next&gt;&gt;" onClick="forward()">
 </form>

essentially I want the buttons to create a continuous loop through the 4 images. I know there is going to be a simple solution I just cant see it. Any help would be great! thank you in advance!

  • javascript
  • loops
  • image-gallery
Share Improve this question edited Jun 11, 2023 at 22:29 Jonas 129k103 gold badges328 silver badges405 bronze badges asked Aug 17, 2012 at 21:53 user1607957user1607957 11 gold badge1 silver badge1 bronze badge 1
  • Some tips: use [] instead of new Array(), as it's faster and takes less space, and put semicolons where they are needed, because even though JavaScript automatically inserts them, sometimes it will insert them in unexpected places and cause unexpected errors. – Cokegod Commented Aug 17, 2012 at 22:10
Add a ment  | 

3 Answers 3

Reset to default 2

You could do this:

function backward() {
    if (which <= 0) {
        which = photos.length - 1;
    } else {
        which--;
    }
    document.images.photoslider.src=photos[which];
 }

 function forward(){
     which = (which + 1) % photos.length;               //  modulus keeps which within
     document.images.photoslider.src=photos[which];     // the bounds, while incrementing
 }

going backward, if which is 0 or less, jump to the last photo. Going forward, if which + 1 == photos.length, the modulus will zero it out, looping you back to the beginning.

 function backward(){
    if (which>0){
     which=which-1;
    } else {
     which=photos.length-1;
    }
    document.images.photoslider.src=photos[which];
 }

 function forward(){
    if (which<photos.length-1){
     which=which+1;
    } else {
     which=0;
    }
   document.images.photoslider.src=photos[which];
 }

tada!

<!DOCTYPE html>
<html>
<body>


<p> click on the button to change the image</p>

     <input type="button" value="&lt;&lt;Back" onClick="backward()"> 

     <img src = "youtube.png" value = "PREVIOUS" id = "prev">


     <input type="button" value="Next&gt;&gt;" onClick="forward()">





<script>

var photos = new Array()
 var i=0
 photos[0]='youtube.png';    //enter the path of the image here
 photos[1]='facebook.png';
 photos[2]='twitter.png';
 photos[3]='sirius_logo_sm.gif';


function backward(){
    if (i>0){
     i=i-1;
    } else {
     i=photos.length-1;
    }
    document.getElementById("prev").src=photos[i];
 }

 function forward()
 {
    if (i<photos.length-1){
     i=i+1;
    } else {
     i=0;
    }
 document.getElementById("prev").src=photos[i]; }


</script>
</body>
</html>

本文标签：

版权声明：本文标题：trying to get simple javascript gallery with next and previous buttons to loop back to the beginning - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745300230a2652327.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。