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>

  • 相关阅读:
    opencv图片右转函数
    多项式相加实验代码和报告
    C++下实现同接口下多个类作为参数的调用和传参
    Betsy Ross Problem
    matlab绘制实用日历实例代码
    node-sass 安装卡在 node scripts/install.js 解决办法
    如何管理自己?
    Webstorm 11 注册/破解方法
    解决play-1.4.0在linux或mac下提示No such file or directory的问题
    PlayFramework 1.2.x 在Controller 中识别JSON提交
  • 原文地址:https://www.cnblogs.com/wode007/p/13055660.html
Copyright © 2011-2022 走看看