分享一下之前做过的轮播图~~~

又是元气满满的一天啊！！！

今天老师又双叒叕催更了！！！

之前学js的时候学着做过轮播图，实现自动轮播，点击切换和鼠标放上停止，移开继续轮播这样子

先看以下我html的的的代码

<div class="autoimg">
        //这些是图片，先默认第一张图片显示
        <a href="javascript:;" style="z-index: 1;"><img src="images/lunbo01.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo02.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo03.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo04.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo05.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo06.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo07.jpg" alt=""></a>
        <a href="javascript:;"><img src="images/lunbo08.jpg" alt=""></a>
        //这些是下面的那个小圆点，大家也都见过吧，点击切换图片的
        <ul class="u1" style="z-index:9;">
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        	<li class="l1"></li>
        </ul>
        <div class="landr">
        //这俩是左右两边的上一张和下一张按钮
            <button class="btn fl" id="turnleft">&lt;</button>
            <button class="btn fr" id="turnright">&gt;</button>
        </div>
	</div>

下面就是当初让我头头头秃的js代码了！！！

高能预警！！！

var nownum = 0;//先声明一个值，，，这个就代表执行次序，也就是第几组了
    var stop = document.getElementsByClassName("autoimg")[0];
    //这个是轮播图最大的div，把他获取到是因为后面设置鼠标移入停止轮播和移出继续轮播的时候要用到
    var img  = document.getElementsByClassName("autoimg")[0].getElementsByTagName("a");
    var li   = document.getElementsByClassName("l1");

//下面的是自动轮播的代码
    function autoimg(adress){
    	for(var i=0;i<img.length;i++){
            img[i].style.zIndex = "0";//先把所有的图片显示优先级设为最低
            li[i].style.background = "white";//把所有小圆点颜色设为默认
    	}
    	//然后一个个显示出来
    	img[nownum].style.zIndex = "1";
    	li[nownum].style.background = "pink";
    	if(adress=="right"){   //如果参数是right的话那NUM值，也就是执行次序就+1
           nownum++;
    	   if(nownum>=img.length){   //加到最大值，也就是最后一张的时候就赋值为0，重新开始轮播
           nownum=0;
    	   }
    	}else if(adress=="left"){   //如果是left的话那就-1
                nownum--;
                if(nownum<=0){   //这个也同上，，一直往左，切到第一张图片时就赋值为最大值，，也就是最后一张
                   nownum=img.length-1;
                }
    	}
    	
    }
    var move = setInterval(function(){autoimg("right")},1000);
    //下面的是点击切换图片的代码
    for(var i=0;i<li.length;i++){
        li[i].index = i;
        li[i].onclick = function(){
        	for(var x=0;x<li.length;x++){
                img[x].style.zIndex = "0";
                li[x].style.background = "white";
        	}
        	this.style.background = "pink";
        	img[this.index].style.zIndex = "1";
        	nownum = this.index;
        }
    }
    //这个是鼠标移入的时候，，，清除了自动轮播的时间函数让他不自动切换图片了
    stop.onmouseover = function(){
    	clearInterval(move);
    }
    //鼠标移出以后继续执行之前的时间函数
    stop.onmouseout = function(){
    	move = setInterval(function(){
            autoimg("right");
        }
    		,1000);
    }
    //点击左边的按钮(上一张)执行一次往左，，当前执行次序-1
    turnleft.onclick = function(){
        autoimg("left");
    }
     //点击右边的按钮(下一张)执行一次往右，，当前执行次序+1
    turnright.onclick = function(){
    	autoimg("right");
    }

好了，就这么多，如果大家有更好更加完善的多多分享哦~~~