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

最新推荐文章于 2022-05-07 00:14:08 发布

liusslove

最新推荐文章于 2022-05-07 00:14:08 发布

阅读量2.4k

点赞数 1

分类专栏： java web 文章标签： javascript 图片 html

本文链接：https://blog.youkuaiyun.com/liusslove/article/details/52927574

版权

java web 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>