我遇到了一个问题,我无法让我的代码在一个循环中为我的图像库旋转多个图像(只是我在谷歌上得到的一堆图像)。然而,我可以获得一个图像来循环浏览图像,但我试图让它与多个图像一起工作的一切都失败了。任何帮助/提示都是有用的。我在大学学习网络开发,我了解javascript的基本知识,但在创建应用程序时,我似乎遇到了一些麻烦。
这里有一个链接到我的代码:jsFiddle
$(document).ready(function () {
var img = document.images;
// Holds the image collection
var counter = 0;
var imgArray = [];
imgArray[0] = "http://www.zeroprox.tk/temp/images/img1.png";
imgArray[1] = "http://www.zeroprox.tk/temp/images/img2.jpg";
imgArray[2] = "http://www.zeroprox.tk/temp/images/img3.png";
imgArray[3] = "http://www.zeroprox.tk/temp/images/img4.jpg";
imgArray[4] = "http://www.zeroprox.tk/temp/images/img5.jpg";
imgArray[5] = "http://www.zeroprox.tk/temp/images/img6.png";
imgArray[6] = "http://www.zeroprox.tk/temp/images/img7.jpg";
imgArray[7] = "http://www.zeroprox.tk/temp/images/img8.png";
$("#left-arrow").click(function () {
if (counter < 0) {
counter = imgArray[counter] - 1;
} else {
counter--;
}
img[1].src = imgArray[counter];
});
// Left arrow... Previous
$("#right-arrow").click(function () {
counter = (counter + 1) % imgArray.length;
img[1].src = imgArray[counter];
});
// right arrow... Next
});
JSFiddle
检查一下,它应该能解决你的问题;)
你每次都替换同一个图像,现在创建一个新图像并删除另一个。
还添加了div#imagelist,用作图像容器,并更容易从JavaScript 访问
var newImg = $(document.createElement("img"));
newImg.attr("src",imgArray[counter]);
$("#imagelist img").last().remove();
$("#imagelist").prepend(newImg);