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 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看