duanchuanqu593743 2013-12-12 03:53
浏览 58
已采纳

随机Javascript图片滑块

I have already created a java script slider for the index of a website I am working on. It displays three images in the slider. I have a database of images resized to what I want. I want to be able to make the three images on the page to be randomly selected from a database or a array of images every time the page is reloaded/visited

How can I randomize the images of slide1, slide2 and 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>
  • 写回答

1条回答 默认 最新

  • dongzhuo1498 2013-12-12 06:40
    关注

    Try this its working 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>

    You can add 1 button to refresh the images and in button click just call loadRandomImages() function. So that only three images will be refreshed not the whole document.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 如何获取烟草零售终端数据
  • ¥15 数学建模招标中位数问题
  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助！
  • ¥15 从键盘随机输入A-H中的一串字符串，用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母，插入认方向
  • ¥15 如何用python向钉钉机器人发送可以放大的图片？
  • ¥15 matlab（相关搜索：紧聚焦）