搞了很长时间才弄清楚图片轮播效果的原理，理解各个事件发生的原因，浪费了这么长的时间，只怪自己的知识太过于薄弱。现将代码写下，供大家参看，如有不妥之处还望指出，大家一起学习。
功能：
1、点击左右两边的按钮，可以让图片进行左右滚动。
2、鼠标点击下方的一排按钮，可切换至想要的那张图片。
3、鼠标经过下方的一排按钮上时，可对图片进行小图预览。
4、当没有鼠标事件时，图片可进行自动播放。
5、当鼠标停留在整个区域上时，图片停止自动播放，当鼠标移出时，继续自动播放。
效果：
代码如下：
1 <!DOCTYPE HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" /> 5 <title>图片轮换效果</title> 6 <style> 7 body,div,ul,li,a,img,span{padding:0;margin:0;} 8 img{border:0;vertical-align:middle;} 9 li{list-style:none;} 10 body{width:100%;height:100px;background:url(img/bg.jpg) no-repeat;font-family:'微软雅黑';} 11 .wrap{width:742px;height:462px;margin:10% auto 60px;position:relative;} 12 .tit{height:50px;line-height:50px;padding-left:10px;margin-bottom:12px;font-size:30px;color:#fff;} 13 p{width:742px;height:462px;position:absolute;padding:0;margin:0;} 14 #img{width:686px;height:390px;margin:28px 0 0 28px;} 15 .wrap a{width:30px;height:60px;line-height:60px;text-align:center;top:208px;position:absolute;display:block;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);} 16 .wrap a:hover{opacity:1;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);} 17 #prev{left:2px;} 18 #next{right:2px;} 19 .btdiv{width:686px;height:50px;line-height:50px;position:absolute;bottom:0;left:37px;} 20 .pic_intro{width:400px;height:50px;line-height:50px;color:#000;font-size:16px;float:left;padding-left:10px;} 21 #ul1{height:10px;padding-top:20px;float:right;padding-right:24px;} 22 #ul1 li{width:14px;height:11px;float:left;margin-left:14px;background:url(img/dot_11.png) no-repeat;position:relative;} 23 #ul1 .active{background:url(img/dot_22.png) no-repeat;} 24 #ul1 span{width:76px;height:69px;display:none;position:absolute;top:-74px;left:-34px;background:url(img/dot_3.png) no-repeat center bottom;} 25 #ul1 img{width:70px;height:56px;border:3px solid #fff;border-radius:5px;} 26 .btm{width:100%;height:60px;background:url(img/btm.png) repeat-x;position:fixed;bottom:0;} 27 </style> 28 <script> 29 window.onload=function(){ 30 var oWrap=document.getElementById('wrap'); 31 var oImg=document.getElementById('img'); 32 var oPre=document.getElementById('prev'); 33 var oNext=document.getElementById('next'); 34 var oNext=document.getElementById('next'); 35 var oTxt=document.getElementById('txt'); 36 var oUl1=document.getElementById('ul1'); 37 var aLi=oUl1.getElementsByTagName('li'); 38 var arrIMG1=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'] 39 var arrTXT=['春天--等闲识得东风面，万紫千红总是春','夏天--绿树阴浓夏日长，楼台倒影入池塘','秋天--榈庭多落叶，慨然知已秋','冬天--寒风摧树木，严霜结庭兰'] 40 var num=0; 41 var timer=null; 42 function autoPlay(){ 43 timer=setInterval(function(){ 44 num++; 45 if(num==arrIMG1.length){ 46 num=0; 47 } 48 show(); 49 },800); 50 } 51 autoPlay(); 52 oWrap.onmouseover=function(){clearInterval(timer);} 53 oWrap.onmouseout=autoPlay; 54 oPre.onclick=function(){ 55 num--; 56 if(num==-1){ 57 num=arrIMG1.length-1; 58 } 59 show(); 60 } 61 oNext.onclick=function(){ 62 num++; 63 if(num>=arrIMG1.length){ 64 num=0; 65 } 66 show(); 67 } 68 function show(){ 69 oImg.src=arrIMG1[num]; 70 oTxt.innerHTML=arrTXT[num]; 71 for(var i=0;i<aLi.length;i++){ 72 aLi[i].className=''; 73 } 74 aLi[num].className='active'; 75 } 76 for(var i=0;i<aLi.length;i++){ 77 aLi[i].index=i; 78 aLi[i].onclick=function(){ 79 oImg.src=arrIMG1[this.index]; 80 oTxt.innerHTML=arrTXT[this.index]; 81 for(var i=0;i<aLi.length;i++){ 82 aLi[i].className=''; 83 } 84 this.className='active'; 85 num=this.index; 86 } 87 aLi[i].onmouseover=function(){ 88 this.getElementsByTagName('span')[0].style.display='block'; 89 } 90 aLi[i].onmouseout=function(){ 91 this.getElementsByTagName('span')[0].style.display='none'; 92 } 93 } 94 95 } 96 </script> 97 </head> 98 <body> 99 <div class="wrap" id="wrap"> 100 <p><img src="img/pic_bg.png" /></p> 101 <img src="img/1.jpg" id='img' /> 102 <a href="javascript:;" id="prev"><img src="img/prev.png" /></a> 103 <a href="javascript:;" id="next"><img src="img/next.png" /></a> 104 <div class="btdiv"> 105 <div class="pic_intro" id="txt">春天--等闲识得东风面，万紫千红总是春</div> 106 <ul id="ul1"> 107 <li class="active"><span><img src="img/1.jpg" /></span></li> 108 <li><span><img src="img/2.jpg" /></span></li> 109 <li><span><img src="img/3.jpg" /></span></li> 110 <li><span><img src="img/4.jpg" /></span></li> 111 </ul> 112 </div> 113 </div> 114 </body> 115 </html>
