JS--图片轮播效果

搞了很长时间才弄清楚图片轮播效果的原理，理解各个事件发生的原因，浪费了这么长的时间，只怪自己的知识太过于薄弱。现将代码写下，供大家参看，如有不妥之处还望指出，大家一起学习。

功能：

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{100%;height:100px;background:url(img/bg.jpg) no-repeat;font-family:'微软雅黑';}
 11 .wrap{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{742px;height:462px;position:absolute;padding:0;margin:0;}
 14 #img{686px;height:390px;margin:28px 0 0 28px;}
 15 .wrap a{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{686px;height:50px;line-height:50px;position:absolute;bottom:0;left:37px;}
 20 .pic_intro{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{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{76px;height:69px;display:none;position:absolute;top:-74px;left:-34px;background:url(img/dot_3.png) no-repeat center bottom;}
 25 #ul1 img{70px;height:56px;border:3px solid #fff;border-radius:5px;}
 26 .btm{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>