html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript" src="lunbotu.js"></script> <style> </style> </head> <body> <div style=" 80%; height: 500px; margin: 0 auto;" > <img src="../../../../图片/1.jpg" alt="logo" id="im" width="100%" height="500px" onMouseOver="aa()"> </div> <br> <div style=" 30%; height: 100px; margin: 0 auto;"> <button onClick="shangye()">上一页</button> <button onClick="bbtu(0)">1</button> <button onClick="bbtu(1)">2</button> <button onClick="bbtu(2)">3</button> <button onClick="bbtu(3)">4</button> <button onClick="xiaye()">下一页</button> </div> </body> </html>
js部分
// JavaScript Document var im =null; //图片标签对象 var sum=["../../../../图片/1.jpg","../../../../图片/2.jpg","../../../../图片/3.jpg","../../../../图片/4.jpg"]; //轮播图路径数组 var n =0; //轮播图下标 var IntervalObj = null; //定时器变量 window.onload=function(){ im = document.getElementById("im"); lunbo(n); stop(); start(); } //轮播 function lunbo(n){ IntervalObj = setInterval(function(){ im.src=sum[n]; n++; if(n>=sum.length){ n=0; } },1200); } //移上暂停 function stop(){ im.onmouseover=function(){ clearInterval(IntervalObj); } } //移下继续 function start(){ im.onmouseout=function(){ IntervalObj = setInterval(function(){ im.src=sum[n]; n++; if(n>=sum.length){ n=0; } },5200); } } //点击按钮1、2、3、4跳转图片 function bbtu(nn){ im.src=sum[nn]; n=nn+1; } //点击下一页跳转下一页 function shangye(){ n--; if(n<= -1){ n=sum.length-1; } im.src=sum[n]; } //点击上一页跳转上一页 function xiaye(){ n++; if(n>= sum.length-1){ n=0; } im.src=sum[n]; }