Question

我有这个图像显示，随机显示图像，并有一个上一个和下一个按钮。它不起作用。

应该每隔几秒将图像更改为一个随机图像，如果有人想要继续或返回到上一个图像，则“上一个”和“下一个”按钮用于。

我的CSS：

    .box {
      display: inline-block;
      vertical-align: middle;
    }

    .container {
      height: 100%;
    }

    .button {
        background-color: darkblue
        border:solid 2px darkblue;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
    }

    .button400  {
             background-color:darkblue;
             color:white;
             font-size:60%;
            font-family:Arial, Helvetica, sans-serif;
    }
    .button400:hover  {
            background-color:white;
            color:darkblue;
            border: 2px solid darkblue;
            font-size:60%;
            border-radius: 8px;
            font-family:Arial, Helvetica, sans-serif;
     }

My HTML:

    <head>
      <title>change picture</title>
      <script type="text/javascript">
        function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
        }

        function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").src = images[x];
        }

        function startTimer() {
          setInterval(displayNextImage, 5000);
        }

        var images = [],
          x = -1;
</head>




    <script type="text/javascript">
    <!--
     var imlocation = "images/";
     var currentdate = 0;
     var image_number = 0;
     function ImageArray (n) {
       this.length = n;
       for (var i =1; i <= n; i++) {
         this[i] = ' '
       }
     }
     image = new ImageArray(3)



          
        images[0] = "http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg";
        images[1] = "http://www.telegraph.co.uk/content/dam/Travel/galleries/travel/picturegalleries/The-Big-Picture-photography-competition-round-240/arpita_patra_2465947a-large.jpg";
        images[2] = "http://www.edmonton.ca/attractions_events/documents/Images/BigPicturePrize1_DiegoLapetina.jpg";
        images[3] = "https://whyevolutionistrue.files.wordpress.com/2013/12/picture-13.png";
     


     var rand = 60/image.length
     function randomimage() {
        currentdate = new Date()
        image_number = currentdate.getSeconds()
        image_number = Math.floor(image_number/rand)
        return(image[image_number])
     }
     document.write("<img src='" + imlocation + randomimage()+ "'>");
    //-->
    </script>



    <div class="container">

      <button class="box button button400" onclick="displayPreviousImage()">Previous</button>

      <div class="box" id="img-box">
        <img width="200" height="100" id="img" src="" />
      </div>

      <button class="box button button400" onclick="displayNextImage()">Next</button>

    </div>

提前致谢。

随机图片图像显示不起作用

0 个答案: