zoukankan      html  css  js  c++  java
  • 制作一个简单的轮播图

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>

    <body>
      <img src="img/1.jpg" id="imge" onMouseMove="jieshu()" onMouseOut="kaishi()">
      <input type="button" value="上一页" onClick="up()">
      <input type="button" value="1" onClick="change(this)">
      <input type="button" value="2" onClick="change(this)">
      <input type="button" value="3" onClick="change(this)">
      <input type="button" value="4" onClick="change(this)">
      <input type="button" value="5" onClick="change(this)">
      <input type="button" value="6" onClick="change(this)">
      <input type="button" value="7" onClick="change(this)">
      <input type="button" value="8" onClick="change(this)">
      <input type="button" value="下一页" onClick="next()">
    </body>
    <script type="text/javascript">
      var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
      var img=document.getElementById("imge");
      var index=0;
      var lunbo=null;
      kaishi();
      function change(obj){
        index=obj.value-1;
        img.src=imgs[index];
      };
      function next(){
        if(index==imgs.length-1){
          index=0;
        }else{
          index++;
        }
        img.src=imgs[index];
      }
      function up(){
        if(index==0){
          index=imgs.length
        }else{
          index--;
        }
        img.src=imgs[index];
      }
      function kaishi(){
        lunbo=setInterval(next,2000);
      }
      function jieshu(){
        clearInterval(lunbo);
      }
    </script>
    </html>

  • 相关阅读:
    Vector-Constructors
    C++:多维数组的动态分配(new)和释放(delete)
    C++:多维数组的动态分配(new)和释放(delete)
    COM_利用GetWallpaper()获取墙纸路径
    COM_利用GetWallpaper()获取墙纸路径
    COM 技术相关概念
    COM 技术相关概念
    全排列与next_permutation
    全排列与next_permutation
    屏蔽MFC程序中的ESC键和ENTER键关闭窗口
  • 原文地址:https://www.cnblogs.com/wode007/p/13055660.html
Copyright © 2011-2022 走看看