-1

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

4

2 回答 2

0

我不知道你周围的 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];
}

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

于 2013-08-14T15:31:06.517 回答
0

根据我第一次回答的要求,这里的代码:

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

希望它符合您的要求。

于 2013-08-19T16:00:29.533 回答