学斋随笔，初九潜龙勿用，-11 简单的定时轮播 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>轮播图</title>
 6 </head>
 7 
 8 <body>
 9     <div>
10          <button onclick="up()">上一张</button>
11          <img src="img/timg.jpg" onMouseOut="start()" onMouseMove="stop()" id="image">
12          <button onClick="next()">下一张</button>
13     </div>
14 </body>
15 </html>
16 <script type="text/javascript">
17              var ph=document.getElementById("image"),
18                  //定义一个变量 获取所需元素
19                  n=0,
20                  //定义一个下标
21                  arr=['img/timg.jpg','img/timg (2).jpg','img/timg (1).jpg'];
22              function next(){
23                  //建立方法 点击下一张的设置
24                  image.setAttribute("src",arr[n]);
25                  //设置图片属性
26                  n++;
27                  if(n>2){
28                      //判断下标
29                      n=0;
30                  }
31              }
32              function up(){
33                  //建立方法 点击上一张的设置
34                  image.setAttribute("src",arr[n]);
35                  //同样设置图片属性
36                  n--;
37                  if(n<0){
38                      //判断下标
39                      n=1;
40                  }
41              }
42          var sss="";
43     
44          window.onload=function(){
45              //加载完后
46              sss=setInterval('next()',2000);
47              //定时器的设置
48          }
49          function stop(){//鼠标移入
50              clearInterval(sss);//
51          }
52          function start(){//鼠标移出
53              sss=setInterval('next()',2000);
54          }
55      </script>

 

posted @ 2018-12-29 13:43  玩转手绘  阅读(127)  评论(0)    收藏  举报