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

你认为你的画廊采用了不同的方法吗？

而不是进行图像计数而不是每个img都在活动之上添加一个类，然后每次img切换更新类

Answer 2

好吧..所以这里是非常简单的画廊......只做你的问题的代码所做的..实际上我只是纠正了它...所以点击下一步然后回来......并获得新的图像..我很快就做到了..因为它被称为画廊所以很多东西都没有了......任何方式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] ;    
    }

带有fwd和bck功能的纯javascript图库

JAVASCRIPT

HTML

2 个答案: