javascript - 具有 fwd 和 bck 功能的纯 javascript 图片库

Question

您好，我知道这是一个部分重复的问题，但我别无选择，因为其他问题仅部分涵盖了它 Making a simple javascript Image gallery .实际上我制作了这个 js 图片库代码，但它不起作用。任何人都可以帮助解释发生了什么。

JavaScript

var imageGallery = new Array();
imageGallery[0] = '2.png';
imageGallery[1] = '3.png';
imageGallery[2] = '4.png';
imageGallery[3] = '5.png';
imageGallery[4] = '6.png';
var imgCount = 0;
function next() {
    imgCount++ ;
    document.getElementById("gallery").style.background = 'url(' + imageGallery[imgCount] + ')';
}

function previous() {
    imgCount--;
    document.getElementById("gallery").style.background = 'url(' + imageGallery[imgCount] + ')';    
    }   

HTML

<a href onclick="next(); return = false;">Next</a>
<a href onclick="previous(); return = false;">Back</a>
<div id="gallery" style="background: url(1.png); height:420px; width:744px"></div>

TBN:这不是最终代码，因为下一个和上一个按钮只要被按下就会继续执行。

Answer 1

好的..所以这是非常简单的图库...它只做您问题的代码所做的事情..实际上我只是更正了它..所以单击下一步然后返回...并获取新图像..我做得很快.. 它被称为画廊缺少了很多东西.. 无论如何you can fiddle with it here

将您的标记更改为..

<a href="#" onclick="next(); return false;">Next</a>
<a href="#" onclick="previous(); return false;">Back</a>
<img id="gallery" src="http://i26.tinypic.com/2hwx3c.jpg" style="height:420px; width:744px" >

和你的脚本......

var imageGallery = [
 "http://i26.tinypic.com/2hwx3c.jpg" ,      
 "http://i43.tinypic.com/2iqxpg1.jpg" ,
  "http://i40.tinypic.com/2agls15.jpg" ,
  "http://i41.tinypic.com/2ym9f01.jpg",
  "http://i32.tinypic.com/14aa4o7.jpg"
  ];

var imgCount = 0;
var totalImgs = imageGallery.length - 1;

function next() {
    imgCount++ ;
   if(imgCount > totalImgs) imgCount = 0

   document.getElementById("gallery").src = imageGallery[imgCount] ;
}

function previous() {
    imgCount--;
  if(imgCount < 0) imgCount = totalImgs ;
       document.getElementById("gallery").src = imageGallery[imgCount] ;    
    }