制作一个简单的轮播图

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

<body>
  <img src="img/1.jpg" id="imge" onm ouseMove="jieshu()" onm ouseOut="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>

上一篇:H5 利用vue实现图片上传功能。


下一篇:设计模式之备忘录模式