1

嗨，我知道这是一个部分重复的问题，但我没有其他选择，因为其他问题仅部分涵盖了它制作一个简单的 javascript 图片库。实际上我制作了这个 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：这不是最终代码，因为只要按下下一个和上一个按钮，它们就会继续执行。

4

2 回答 2

1

您是否考虑过对您的画廊采取不同的方法？

而不是进行图像计数，而是为每个处于活动状态的 img 添加一个类，然后每次 img 开关更新类

于 2013-10-13T17:21:42.290 回答
1

好的..所以这里有一个非常简单的画廊...它只做您问题代码的作用..实际上我只是更正了它..所以单击下一步并返回...并获取新图像..我很快就做到了..所以很多东西都缺少它被称为画廊..你可以在这里摆弄它的任何方式

将您的标记更改为..

<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] ;    
    }
于 2013-10-13T17:25:04.467 回答