adding 'Next' 'Random' 'previous' buttons to this random image script

问题

I have a random image script, which displays random images on each page load. I want to add Next, Previous and Random buttons to this script, but don't know how to implement them.

Here's the Script

<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. I am using this script in blogger blog as blogpost.

回答1:

Based on the request from first my answer, here the code:

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>

And the modifed Javascript code:

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

Hopefully it meets your requirement.

回答2:

I don't know your surrounding HTML code. In my eyes you should throw away your code.

Here a simple image gallery that should meet your requirements:

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>

And the Javascript code:

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

At my local computer it did work perfectly...

来源：https://stackoverflow.com/questions/18235156/adding-next-random-previous-buttons-to-this-random-image-script

标签

javascript

image

random

blogger