随机 Javascript 图片滑块答案

【问题标题】：Randomized Javascript Picture Slider随机 Javascript 图片滑块
【发布时间】：2013-12-12 03:53:24
【问题描述】：

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

如何随机化slide1、slide2和slide3的图片？

<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>

【问题讨论】：

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

标签： javascript php arrays database slider

【解决方案1】：

试试这个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() 函数。这样只会刷新三张图片，而不是整个文档。

【讨论】：