使用javaScript使图片轮播并且能够使用按键控制切换图片

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script>
      function showimg(i) {
          var img=document.getElementById("img");

          switch (i){
              case 1:
                  img.src="../img/a7.jpg" ;
                  break;
              case 2:
                  img.src="../img/a8.jpg" ;
                  break;
              case 3:
                  img.src="../img/b6.jpg" ;
                  break;
              case 4:
                  img.src="../img/b11.jpg" ;
                  break;


          }
      }
      var index=1;
      function imgGo() {
          setInterval(function () {
              index++;
              if(index>4){
                  index=1;
              }
              showimg(index);
          },3000);
      }
    script>
head>
<body οnlοad="imgGo()">
<div style="width: 200px;height: 200px;overflow: hidden"  >
 <div>    <img src="../img/a7.jpg" height="255" width="255" id="img" />
 div>
div>
<input type="button" style="width: 10px" value="1" οnclick="showimg(1)">
<input type="button" style="width: 10px" value="2" οnclick="showimg(2)">
<input type="button" style="width: 10px" value="3" οnclick="showimg(3)">
<input type="button" style="width: 10px" value="4" οnclick="showimg(4)">

body>
html>

你可能感兴趣的:(java,web)