码迷,mamicode.com
首页 > 其他好文 > 详细

制作一个简单的轮播图

时间:2020-06-06 18:36:12      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:jpg   click   简单   sem   fun   input   NPU   dex   set   

<!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>

制作一个简单的轮播图

标签:jpg   click   简单   sem   fun   input   NPU   dex   set   

原文地址:https://www.cnblogs.com/wode007/p/13055660.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!