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
