Question

如何在图像的任一侧制作上一个和下一个按钮？这是我的代码：

＆＃13;

<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;


<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] = "";
    images[1] = "";
    images[2] = "";
    images[3] = "";
    
 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>
  
  </script>
</head>

<body onload="startTimer()">
  <center><div id="img-box">
    <img id="img" src="" />
    </div></center>
    
    
    <button class="button button400" onclick="displayPreviousImage()">Previous</button>

              
       <button class="button button400"onclick="displayNextImage()">Next</button>
</body>

＆＃13;

Answer 1

你需要重新订购一些这样的元素：

<body onload="startTimer()">
         <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>
    </body>

添加CSS脚本：

.box {
  display: inline-block;
  vertical-align: middle;
}

JSFiddle：Here

有关如何在图像两侧创建上一个和下一个按钮的任何想法？

1 个答案: