随机Javascript图片滑块

我已经为我正在处理的网站的索引创建了一个java脚本滑块。它在滑块中显示三个图像。我有一个数据库的图像调整到我想要的。我希望能够在页面重新加载/访问时，从页面上随机选择页面上的三个图像随机Javascript图片滑块

如何随机化幻灯片1，幻灯片2和幻灯片3的图像？

<script> 
     var aca = Math.floor((Math.random()*3)+1); 
     var ath = Math.floor((Math.random()*3)+1); 
     var act = Math.floor((Math.random()*3)+1); 
</script> 

<div id="main_slide"> 
    <div id="slide-buttons"> 
     <button class='prev' onclick='mySwipe.prev()'>&lt;</button> 
     <a class='links' href="http://www.hrhsfalcons.com/academics">Academics</a> 
     <a class='links' href="http://www.hrhsfalcons.com/athletics">Athletics</a> 
     <a class='links' href="http://www.hrhsfalcons.com/clubs">Activities</a> 
     <button class='next' onclick='mySwipe.next()'>&gt;</button> 
    </div> 

     <script> 
     document.write("<div id='mySwipe' class='swipe'><div class='swipe-wrap'>"); 
     document.write('<div id="slide1"><img src="http://www.hrhsfalcons.com/assets/img/aca_' +aca+ '.jpg" /></div>'); 
     document.write('<div id="slide2"><img src="http://www.hrhsfalcons.com/assets/img/ath_' +ath+ '.jpg" /></div>'); 
     document.write('<div id="slide3"><img src="http://www.hrhsfalcons.com/assets/img/act_' +act+ '.jpg" /></div>'); 
     document.write('</div></div>'); 
     </script> 
</div>

来源

2013-12-12 LEnc95

如果它的页面重新加载，那么你可以简单地使用php或任何其他服务器端语言以及sql查询来随机选择图像。 –

试试这个其工作http://jsfiddle.net/qk3ES/

<body onload="loadRandomImages()"> 


<div id="main_slide"> 
    <div id="slide-buttons"> 
     <button class='prev' onclick='mySwipe.prev()'>&lt;</button> 
     <a class='links' href="http://www.hrhsfalcons.com/academics">Academics</a> 
     <a class='links' href="http://www.hrhsfalcons.com/athletics">Athletics</a> 
     <a class='links' href="http://www.hrhsfalcons.com/clubs">Activities</a> 
     <button class='next' onclick='mySwipe.next()'>&gt;</button> 
     <div id='mySwipe' class='swipe'> 
     <div class='swipe-wrap'> 
      <div id="slide1"><img id="slide1Img" /></div> 
      <div id="slide2"><img id="slide2Img" /></div> 
      <div id="slide3"><img id="slide3Img" /></div> 
     </div> 
     </div> 
</div> 

     <script> 
      function loadRandomImages() { 
       var aca = Math.floor((Math.random() * 3) + 1); 
       var ath = Math.floor((Math.random() * 3) + 1); 
       var act = Math.floor((Math.random() * 3) + 1); 

       var slide1Src = 'http://www.hrhsfalcons.com/assets/img/aca_'+ aca +'.jpg'; 
       var slide2Src = 'http://www.hrhsfalcons.com/assets/img/ath_' +ath+ '.jpg'; 
       var slide3Src = 'http://www.hrhsfalcons.com/assets/img/act_' +act+ '.jpg'; 

       document.getElementById('slide1Img').src = slide1Src; 
       document.getElementById('slide2Img').src = slide2Src; 
       document.getElementById('slide3Img').src = slide3Src; 
      } 
     </script> 
</div> 



    </body>

您可以添加1个按钮刷新图像和按一下按钮只需调用loadRandomImages（）函数。因此，只有三张图像将被刷新而不是整个文档。

来源

2013-12-12 06:40:44 ArchFever

随机Javascript图片滑块

回答

相关问题