轮播图理解并应用 

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>无标题文档</title>
 6         <script type="text/javascript" src="lunbotu.js"></script>
 7     </head>
 8 
 9     <body>
10     <div>
11         <button onclick="up()">上一张</button>
12         <img src="../1.12/xiangmu/image/b1.jpg" onMouseOut="start()" onMouseMove="stop()" id="img1">
13         <button onClick="next()">下一张</button>
14     </div>
15     </body>
16     <script type="text/javascript">
17             var p1=document.getElementById("img1"),//定义一个变量 获取所需元素
18                 n=0,//随便定义一个下标
19                 arr=['../1.12/xiangmu/image/b1.jpg','../1.12/xiangmu/image/b2.jpg'];//将要轮播的图片存入
20             function next(){//建立方法 点击下一张的设置
21                 img1.setAttribute("src",arr[n]);//设置图片属性
22                 n++;
23                 if(n>1){//判断下标的情况
24                     n=0;
25                 }
26             }
27             function up(){//建立方法 点击上一张的设置
28                 img1.setAttribute("src",arr[n]);//同样设置图片属性
29                 n--;
30                 if(n<0){//判断下标
31                     n=1;
32                 }
33             }
34         var aaa="";//定义一个变量为空
35         window.onload=function(){//加载完后的操作
36             aaa=setInterval('next()',1000);//定时器的设置 1s
37         }
38         function stop(){//鼠标移上图的时候停止的操作
39             clearInterval(aaa);//
40         }
41         function start(){//鼠标移出图的时候停止的操作
42             aaa=setInterval('next()',1000);//1s
43         }
44     </script>
45 </html>
46
简易轮播图

 

posted @ 2018-01-21 00:04  邹少聪  阅读(150)  评论(0)    收藏  举报