Question

我已经为我正在处理的网站的索引创建了一个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>

Answer 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（）函数。这样只刷新三张图片而不是整张文件。

随机Javascript图片滑块

1 个答案: