我正在尝试制作一个非常简单的图片库。大多数设计已经完成(使用了JQuery)...但是现在,我正在尝试思考更改图像所需的逻辑。对于这一部分,我认为我只是使用javaScript而不是Jquery来保持简单。我不太熟悉javaScript语法,但这是我的入门尝试。这是创建图片库的可行方法吗?我知道将图像制作为背景并不是一个好主意,但是出于测试目的,我不希望裁剪图像-因此将图像设置为背景会修剪图像以使其适合。

我还试图考虑如何最初将ImageCnt设置为零...页面加载时可以使用onload函数将ImageCnt设置为0吗?可以将var传递给next()吗?如果是这样,我可以将当​​前的ImageCnt从onClick传递给该函数。

PS。我省略了很多代码以使其易于阅读,但是如果有必要,我可以提供更多代码。

谢谢!这是我的代码:

Java脚本

<script>
  function next()
  {
    var myImage= new Array();
    myImage[0]="penguins.jpg";
    myImage[1]="desert.jpg";
    myImage[2]="jellyfish.jpg";
    myImage[3]="flower.jpg";

    ImageCnt++;

    document.getElementById("whiteBox").style.background = 'url(myImage[ImageCnt])';
  }
</script>


html

<a href="#" onclick="next()"><img src="next.png"/></a>

最佳答案

最重要的是,您需要通过串联(“ +”运算符)其不同部分来构建背景属性,如下所示;否则,如果将其设为静态字符串,则不会被数组中的值替换。

还可以使用全局范围来声明和初始化图像数组和计数器:

<script>
var myImage= new Array();
myImage[0]="penguins.jpg";
myImage[1]="desert.jpg";
myImage[2]="jellyfish.jpg";
myImage[3]="flower.jpg";

var ImageCnt = 0;

function next(){
    ImageCnt++;
    document.getElementById("whiteBox").style.background = 'url(' + myImage[ImageCnt] + ')';
  }
</script>


最后,从onclick返回false,否则您将重新加载页面:

<a href="#" onclick="next();return false;"><img src="next.png"/></a>

关于javascript - 制作一个简单的JavaScript图片库,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14299917/

10-09 17:41
查看更多