我有一个随机图像脚本，它在每个页面加载时显示随机图像。我想在此脚本中添加Next，Previous和Random按钮，但不知道如何实现它们。
这是脚本
<script type="text/javascript">
var Statements = new Array(
'<img src="http://4.bp.blogspot.com/_UdzqQpb36Jo/R9kVS0h1BFI/AAAAAAAAD_o/SRGugAQSF0A/s1600/timming_pictures_37.jpg" height="650" width="625">',
'<img src="http://4.bp.blogspot.com/_UdzqQpb36Jo/SCxOksTrn4I/AAAAAAAAFDg/q3RilNGj9kc/s1600/loving_husbands_03.jpg" height="650" width="625">',
'<img src="http://3.bp.blogspot.com/_lCRnsgTQgRo/Se2KNaw6bpI/AAAAAAAAA5c/yV2PCN0Pmyo/s1600/pic22806.jpg" height="650" width="625">',
'<img src="http://1.bp.blogspot.com/_lCRnsgTQgRo/Se2J4mZjNEI/AAAAAAAAA4s/Q6Z8IlWLS-A/s1600/pic14006.jpg" height="650" width="625">'
);
function GetStatement(outputtype)
{
if(++Number > Statements.length - 1) Number = 0;
if (outputtype==0)
document.write(Statements[Number])
else if (document.getElementById)
document.getElementById("ponder").innerHTML=Statements[Number];
}
function GetRandomNumber(lbound, ubound)
{
return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
}
var Number = GetRandomNumber(0, Statements.length - 1);
</script>
<script type="text/javascript">
GetStatement(0)
</script>
PS。我在博客博客中使用此脚本作为blogpost。
答案 0 :(得分：0)
我不知道你周围的HTML代码。在我看来，你应该抛弃你的代码。
这是一个符合您要求的简单图片库：
HTML code：
<html>
<head>
<meta http-equiv="expires" content="0">
</head>
<body onload="randomStartPic()">
<div id="picture"><img name="picturegallery"></div>
<div id="navigation">
<a href="javascript:bw()">Backward</a> | <a href="javascript:fw()">Forward</a>
</div>
<body>
</html>
和Javascript代码：
var pics=new Array ("http://4.bp.blogspot.com/_UdzqQpb36Jo/R9kVS0h1BFI/AAAAAAAAD_o/SRGugAQSF0A/s1600/timming_pictures_37.jpg", ...)
var a=0, b = pics.length;
function fw()
{
if (a == (b - 1))
{
a = 0;
} else {
a++;
}
showPicNo(a);
}
function bw()
{
if (a == 0)
{
a = b - 1;
} else {
a--;
}
showPicNo(a);
}
function randomStartPic()
{
a = Math.floor(Math.random() * (b - a)) + a;
showPicNo(a);
}
function showPicNo(picNumber)
{
window.document.images["picturegallery"].src=pics[picNumber];
}
在我的本地电脑上，它确实完美无缺......
答案 1 :(得分：0)
根据我的第一个答案的请求，这里是代码：
HTML code：
<body onload="showPicNo(a)">
<div id="picture"><img name="picturegallery"></div>
<div id="navigation">
<a href="javascript:bw()">Backward</a> |
<a href="javascript:fw()">Forward</a> |
<a href="javascript:shareButton()">Share site</a>
</div>
<body>
修改后的Javascript代码：
/*
The array 'pics' contains all adresses of picture you want to show. Scrope: global
*/
var pics=new Array (
"https://www.gravatar.com/avatar/9be5d328127c377109b295b5941733fb?s=32&d=identicon&r=PG",
"https://www.gravatar.com/avatar/1e81ddcda5d50a39c2beeaba3797702a?s=32&d=identicon&r=PG&f=1",
"https://www.gravatar.com/avatar/f47359966d28f2e603b6f759855970db?s=32&d=identicon&r=PG&f=1",
"https://www.gravatar.com/avatar/7d1a2026b0dca412b04ec548397b37f6?s=32&d=identicon&r=PG"
);
/*
The variable to used as the minimum number of elements and container for the current picture.
Because we work with an array, the index from first array element is zero.
Scope: global
*/
var a = 0;
/*
The variabe that used as the maximum number of showed pictures.
Here: The number of elements from array 'pics'. Scrope: global
*/
var b = pics.length;
/*
The current url that contains the adressbar from browser. Scope: global
*/
var currentUrl = document.URL;
/*
---------------------------------------------------------------------------------
Initial quicktest, if the parameter 'picnoprogram' does exits.
The parameter 'picnoprogram' is used parallel as an indicator and
as persistance layer.
Scope: global
*/
var existsPicParameter = currentUrl.match(/picnoparam\S*/i);
/*
Some helper variables. Scope: global
*/
var tmpPicParameter, tmpPicParameterOld;
/*
First requirement: If the page was loaded at the first time, it shall be show a
random picture from all available pictures.
The value of variable 'existsPicParamete' will be Null, if the parameter does not
exists in the adress bar; else a list of elements will be stored in there.
*/
if (existsPicParameter != null)
{
/*
So the page wasn't been loaded at first time.
We need the index from the last showed picture.
*/
tmpPicParameter = existsPicParameter[0].match(/picnoparam=\d+/i);
if (tmpPicParameter != null)
{
/*
Extracting the index from string
*/
a = parseInt(tmpPicParameter[0].match(/\d+/i));
tmpPicParameterOld = tmpPicParameter[0];
}
} else {
/*
So the page was loaded at the first time.
Generate a random number, within the declared range.
*/
a = Math.floor(Math.random() * (b - a)) + a;
}
/*
End of the initial quicktest
---------------------------------------------------------------------------------
*/
/*
The javascript function for forward scrolling.
It needs an explicit call.
*/
function fw()
{
if (a == (b - 1))
{
/*
The index of last array element is the array length minus 1.
Then reset the counter variable.
*/
a = 0;
} else {
a++;
}
navigate(a);
}
/*
The javascript function for backward scrolling.
It needs an explicit call.
*/
function bw()
{
if (a == 0)
{
a = b - 1;
} else {
a--
}
navigate(a);
}
/*
The javascript function that modified the page url
*/
function navigate(a)
{
if (existsPicParameter == null)
{
if (currentUrl.indexOf("?") == -1)
{
currentUrl += "?";
} else {
/*
In case there were already one or more url parameters,
the seporerator for another one is '&'
*/
currentUrl += "&";
}
/*
Extend the current url with parameter 'picnoprogram'.
*/
currentUrl += "picnoparam="+a;
} else {
/*
Update the current parameter value in the adressbar with the new one,
by replacing.
Only if the parameter 'picnoprogram' had been alerady exist
*/
tmpPicParameter[0] = tmpPicParameter[0].replace(/\d+/i,a);
currentUrl = currentUrl.replace(tmpPicParameterOld,tmpPicParameter[0]);
}
/* "Reload the site" */
window.location.replace(currentUrl);
}
/*
The javascript function for assigning the stored url to the HTML element 'img'.
It needs an explicit call.
*/
function showPicNo(picNumber)
{
window.document.images["picturegallery"].src=pics[picNumber];
}
/*
The javascript function that uses the share service from facebook.
See: http://stackoverflow.com/questions/13223951/facebook-share-button-how-to-implement .
It needs an explicit call.
*/
function shareButton()
{
/*
This ist the main part of the solution
*/
var facebooksUrlForSharingSites = 'https://www.facebook.com/sharer/sharer.php?u='
facebooksUrlForSharingSites += document.URL;
/*
An example way how to transfer the sharing data
*/
window.open(facebooksUrlForSharingSites,450,420);
}
希望它符合您的要求。