图片轮播

 图片轮播需求：
  1.图片每隔三秒自动切换
  2.鼠标移入，轮播暂停；鼠标出来，轮播继续
  3.左右切换按钮

  4.点击小圆点实现切换到对应图片

html结构：

<div class="banner">
 <div class="banner_center" id="banner">
  <!--图片1-->
  <a href=""><div class="banner_slide slide1 slide_active"></div></a>
  <!--图片2-->
  <a href=""><div class="banner_slide slide2"></div></a>
  <!--图片3-->
  <a href=""><div class="banner_slide slide3"></div></a>
  <!--左右按钮-->
  <a href="javascript:void(0)" class="banner_btn left_btn" id="left_btn"></a>
  <a href="javascript:void(0)" class="banner_btn right_btn" id="right_btn"></a>
  <!--小圆点-->
  <div class="dot_div" id="dot_div">
   <span class="dot dot_active"></span>
   <span class="dot"></span>
   <span class="dot"></span>
  </div>
 </div>
</div>

CSS：

.banner{
	width: 100%;
	background-color: aquamarine;
}
.banner_center{
	width: 1190px;
	height: 360px;
	margin: auto;
	overflow: hidden;
	position: relative;
}
.banner_slide{
	width: 1190px;
	height: 360px;
	display: none;
}
.slide1{
	background-image: url(../img/171201_0h0cje6759ke27482ai0ieahc5399_1200x360.jpg);
}
.slide2{
	background-image: url(../img/5a73bf50Nc6bd41a9.jpg);
}
.slide3{
	background-image: url(../img/5a6fc709N81142311.jpg);
}
.slide_active{
	display: block;
}

/*左右按钮*/
.banner_btn{
	display: block;
	width: 50px;
	height: 100px;
	background-color: rgba(0,0,0,0.1);
	color: #fff;
	position: absolute;
	top: 50%;
	margin-top: -50px;
	transition: all 1s;
}
.left_btn{
	left: 0;
}
.right_btn{
	right: 0;
}
.banner_btn:hover{
	background-color: rgba(0,0,0,0.8);
}


/*小圆点*/
.dot_div{
	width: 70px;
	position: absolute;
	top: 340px;
	right: 0;
}
.dot{
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 8px;
	border: 1px solid #fff;
	background-color: #777777;	
	margin-right: 2px;
}
.dot_active{
	border: 1px solid #777;
	background-color: #fff;
}

js：

//获取DOM元素的方法
function getele(d){
	return typeof(d) === "string" ? document.getElementById(d) : d;
}

var index = 0,
    timer = null,
    pics = getele("banner").getElementsByTagName("div"),
    len = pics.length,
    btn_left = getele("left_btn"),
    btn_right = getele("right_btn"),
    dots = getele("dot_div").getElementsByTagName("span");
//获取到banner区
var banner = getele("banner");


function slideImg(){
	//绑定事件，鼠标移入，消除定时器，鼠标移出，继续
	banner.onmouseover = function(){
		//消除定时器
		clearInterval(timer);
	}
	banner.onmouseout = function(){
		timer = setInterval(function(){
			index++;
			//这里len最后一位是放小圆点，所以注意
			if(index > len - 2)	index = 0;
			changeImg();			
		},3000);
	}
	//立即执行鼠标移出事件，即图片轮播
	banner.onmouseout();
	
	//小圆点切换，为每个小圆点绑定事件
	for(var d = 0 ;d < len - 1;d++){
		dots[d].id = d;
		dots[d].onclick = function(){
			index = this.id;
			for(var a = 0 ;a < len - 1; a ++){
				dots[a].className = "dot";
			}
			this.className = "dot dot_active";
			changeImg();
		}
	}
	
	//左右切换图片
	btn_left.onclick = function(){
		index --;
		if(index < 0) index = len - 2;
		changeImg();
	}
	btn_right.onclick = function(){
		index ++;
		if(index > len - 2)  index = 0;
		changeImg();
	}
}


/*切换图片函数*/
function changeImg(){
	for(var i = 0;i < len - 1;i++){
		pics[i].style.display = "none";
		dots[i].className = "dot";
	}
	pics[index].style.display = "block";	
	dots[index].className = "dot dot_active";
}


slideImg();

ok啦