用js写轮播图

 <script type="text/javascript">
   //获取当前图片的下标
   var num = 0;
   //获得图片的一串数组元素
   var Img = document.getElementsByClassName("bannerImg")[0].getElementsByTagName("a");
   //获取li的数组元素
   var li = document.getElementsByClassName("item");
   var banner = document.getElementsByClassName("banner")[0];
   //进行图片轮播的一个方法
      function  bannerAuto(adress){
      	//使当前所有的图片的层级为0并且Li的背景颜色设置为#FFF
      	for(var i = 0; i<Img.length;i++){
      		Img[i].style.zIndex="0";
      		li[i].style.background="#fff";

      	};
      	//使当前下标的图片的层级为1，并且当前li的背景颜色设置为pink
      	Img[num].style.zIndex="1";
      	li[num].style.background="pink";
      	//使num下标进行累计
      	if(adress=="right"){
      		num++;
      			if(num>=Img.length){
      		num=0;
      	}
      	
      	//当num大于等于图片数组元素长度时，归零
      
      	}else if(adress == "left")
      
      		num --;
      	     if(num<0){
      		
      			num=Img.length-1;
      		}
      	
      	}
      //每隔2秒执行一次轮播方法
     var move=setInterval(function(){
     	bannerAuto("right")},2000);
      
      //点击事件
       for(var i=0; i<li.length;i++){
       	//获取当前的选中的Li
       	li[i].index = i;
       	//设置每个Li的点击效果事件-
       	li[i].function(){
       		for(var j =0; j<Img.length;j++){
       			Img[j].style.zIndex="0";
       			li[j].style.background="#fff";

       		};
       		this.style.background="pink";
       		Img[this.index].style.zIndex="1";
       		num=this.index;//关联点击的下标和num值，也就是自动轮播的下标
       	}
       };


       banner.function(){
       	clearInterval(move);
       }



       banner.function(){
       	move=setInterval(function(){
       		bannerAuto("right");
       	},2000)
       };
       left.function(){
                 bannerAuto("left")
       }
       right.function(){
       	      bannerAuto("right")
       }



   </script>
</html>