向此随机图像脚本添加“下一个”“随机”“上一个”按钮答案

【问题标题】：adding 'Next' 'Random' 'previous' buttons to this random image script向此随机图像脚本添加“下一个”“随机”“上一个”按钮
【发布时间】：2013-08-14 14:56:15
【问题描述】：

我有一个随机图像脚本，它会在每次加载页面时显示随机图像。我想在此脚本中添加 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。我在博主博客中使用这个脚本作为博文。

【问题讨论】：

你永远不应该覆盖 Number（或任何其他）内置函数/类型！为上面的“数字”找到更好的变量名称。
您介意恢复接受标志吗？该代码一直有效，您正在使用它。

标签： javascript image random blogger

【解决方案1】：

根据我第一次回答的要求，这里是代码：

HTML 代码：

  <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);
 }

希望它能满足您的要求。

【讨论】：

非常感谢您的帮助。我只想请求一件事，是否可以在此修改后的代码中包含页面加载中随机图像的功能，就像之前的代码中的一样，以及是否可以在此包含另一个名为“random”的按钮代码，以便在单击时随机加载图像。最后我想知道固定图像高度和宽度的方法？
在对我的源代码进行了简短的审查之后，我发现了一个错误。我根据您的要求编辑了我的代码。您只需添加另一个调用“randomPicture()”的按钮。
非常感谢，编辑后的脚本工作正常（在页面加载时显示随机图像），但只有随机按钮不起作用。单击页面时会显示一些随机编号。地址栏显示这个 javascript:randomPicture()
谢谢，随机功能现在可以工作了，但没有页面重新加载（印象）。它可以链接到导航功能，如后退和前进按钮。请在您方便的时候回复。
我听不懂你的意思。只有当您调用“randomPicture()”或浏览器地址栏中的 url-没有参数“picnoparam”时，随机函数才有效。

【解决方案2】：

我不知道您周围的 HTML 代码。在我看来你应该扔掉你的代码。

这里有一个简单的图片库，应该可以满足您的要求：

HTML 代码：

<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];
}

在我的本地计算机上它确实工作得很好......

【讨论】：

感谢您的帮助，我已经在我的 Blogger 博客上尝试了您的代码及其工作，但似乎在刷新 (F5) 时加载整个页面后加载图像，我希望图像加载页面以及单击“后退”“前进”链接时，图像会在不重新加载整个页面的情况下加载，是否可以在按下这些按钮时加载整个页面，从而创建页面印象。
除非您不提供任何源代码（即 URL），否则无法为您提供帮助。
我已经在这个博客上尝试过这个以进行测试。 testingmetro.blogspot.com/2013/08/test.html这是我实际使用的博客woofhits.blogspot.com
我想我能理解你。这是浏览器缓存的问题。该页面将存储在本地计算机上。如果按 F5，浏览器会从缓存加载 html 页面，这比从 Internet 下载要快。如果您将 '' 添加到 head 部分会发生什么（请参阅我更新的源代码）？
因为你的标点很差，很难理解你真正想要什么。确实要重新加载带有特定图片的页面？