Javascript 制作一个简单的javascript图片库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14299917/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a simple javascript Image gallery
提问by ThisBetterWork
I'm trying to make a very simple Image gallery. Most of the design is already complete (used JQuery)...but now I'm trying to think out the logic it takes to get the images to change. For this part I was thinking I would just use javaScript instead of Jquery just to keep it simple. I'm not too familiar with the javaScript syntax but this is my attempt to get started. Is this a feasible way to create an image gallery? I know making the images the background isn't a great idea, but for testing purposes I don't feel like cropping images -- so setting the image as the background trims the images to fit.
我正在尝试制作一个非常简单的图片库。大部分设计已经完成（使用 JQuery）...但现在我正在尝试思考改变图像所需的逻辑。对于这部分，我想我只会使用 javaScript 而不是 Jquery 来保持简单。我不太熟悉 javaScript 语法，但这是我开始的尝试。这是创建图片库的可行方法吗？我知道将图像作为背景不是一个好主意，但出于测试目的，我不想裁剪图像——因此将图像设置为背景会修剪图像以适应。
I was also trying to think about how to set the ImageCnt to zero initially... Can an onload function be used to set the ImageCnt to 0 when the page loads? Can a var be passed into next()? If so, I could pass the current ImageCnt from the onClick to the function.
我还试图考虑如何最初将 ImageCnt 设置为零...当页面加载时，是否可以使用 onload 函数将 ImageCnt 设置为 0？可以将 var 传递给 next() 吗？如果是这样，我可以将当前 ImageCnt 从 onClick 传递给函数。
PS. I've omitted a lot of code to keep it simple to read, but I can provide more if it's necessary.
附注。我省略了很多代码以使其易于阅读，但如果需要，我可以提供更多代码。
Thanks! here's my code:
谢谢！这是我的代码：
Javascript
Javascript
<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
html
<a href="#" onclick="next()"><img src="next.png"/></a>
回答by darma
Most importantly, you need to build the background property by concatenating ("+" operator) its different parts, as shown below ; otherwise it won't be replaced by the values from your array if you make it a static string.
最重要的是，您需要通过连接（“+”运算符）其不同部分来构建背景属性，如下所示；否则，如果将其设为静态字符串，则它不会被数组中的值替换。
Also use the global scope to declare and initialize your image array and counter :
还可以使用全局范围来声明和初始化您的图像数组和计数器：
<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>
Finally, return false from onclick otherwise you'll reload the page :
最后，从 onclick 返回 false 否则您将重新加载页面：
<a href="#" onclick="next();return false;"><img src="next.png"/></a>
回答by geotheory
This is the best example of a simple inline non-jQuery image gallery that I've found, obtained from http://extremestudio.ro/:
这是我找到的一个简单的内联非 jQuery 图片库的最佳示例，它来自http://extremestudio.ro/：
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>
Simple and Effective Photo Gallery with HTML and JavaScript
</title>
<style type="text/css">
body {
background: #222;
margin-top: 20px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #444;
padding: 1px;
width: 400px;
}
</style>
</head>
<body>
<div class="gallery" align="center">
<h3>Simple and Effective Photo Gallery with HTML and JavaScript</h3><br/>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://bit.ly/2rz3hy" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://bit.ly/1ug1e6" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://bit.ly/1yIAYc" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://bit.ly/2LHyDW" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://bit.ly/2wyHSR" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://bit.ly/yRo1i" alt="Image Not Loaded"/>
</div><br/>
<div class="preview" align="center">
<img id="preview" src="http://bit.ly/2rz3hy" alt="No Image Loaded"/>
</div><br/>
</div>
</body>
</html>
The only javascript is embedded in the tags, but could easily be moved to script tags for more flexibility.
唯一的 javascript 嵌入在标签中，但可以轻松移动到脚本标签以获得更大的灵活性。
