js carousel (method 1)

html part

<div id="frame">
	<a id="left" href="javascript:;"> ← </a>  
	<a id="right" href="javascript:;"> → </a>  
	<div id="top"></div>  
	<img id="image" src=""/>
	<div id="bottom"></div>  
</div>

css part

<style>
#frame{
width:680px;  
        height: 544px;  
        border: 2px solid red;  
        overflow: hidden;  
        margin: 100px auto; 
}
#left{  
        width: 30px;  
        height: 30px;   
        font-family: "微软雅黑";  
        font-size: 25px;  
        text-align: center;  
        text-decoration: none;  
        color: white; 
        background-color: black; 
        position: absolute;  
        top: 350px;  
        left: 340px;  
        }  
        #right{  
        width: 30px;  
        height: 30px;  
        background-color: black;  
        font-family: "微软雅黑";  
        font-size: 25px;  
        text-align: center;  
        text-decoration: none;  
        color: white;  
        position: absolute;  
        top: 350px;  
        left: 970px;  
        }  
        #top{  
        width: 680px;  
        height: 50px;  
        background-color:darkblue;  
        position: absolute;  
        color: white;  
        text-align: center;  
         }  
        #bottom{  
        width: 680px;  
        height: 50px;  
        background-color:darkblue;  

        position: absolute;  

         top: 596px;  
         color: white;  
         text-align: center;  
          }
          #image{
           width: 680px;
           }  

</style>

js part

var aleft=document.getElementById("left");
var aright=document.getElementById("right");
var atop=document.getElementById("top");
var abottom=document.getElementById("bottom");
var aimg=document.getElementById("image");
var num=0;
var mg=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var font=["文字一","文字二","文字三","文字四","文字五"];
atop.innerHTML=num+1 +"/"+mg.length;  
aimg.src=mg[num];  
abottom.innerHTML=font[num];  
var time=setInterval(times,3000); 
 function bbq(){  
           atop.innerHTML=num+1 +"/"+mg.length;  
           aimg.src=mg[num];  
            abottom.innerHTML=font[num];  
            }  
function times(){  
                num++;  
                if(num==mg.length){  
                    num=0;  
                }  
                bbq();  
            } 
 right.onclick=function(){  
                times();  
             }  
 left.onclick=function(){  
                num--;  
                if(num<0){  
                    num=mg.length-1;  
                }  
                bbq();  
            }    
 image.onmousemove=function(){  
                clearInterval(time);  
            }  
  image.onmouseout=function(){  
                time=setInterval(times,3000);  
            }