js轮播图。拆分来写，其实不难！

html代码

div代码

<div id="box">
			<img src="img/banner1.jpg" id="pic">
			<ul id="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
			<div id="left" class="bt"><</div>
			<div id="right" class="bt">></div>
		</div>

css代码

<style>
			*{
				margin: 0;
				padding: 0;
			}
			//div样式
			#box{
				width: 41.125rem;
				height: 12.875rem;
				margin: 0 auto;
				position: relative;
			}
			//左右按钮相同样式
			.bt{
				width: 2.5rem;
				height: 3.75rem;
				background-color: rgba(0,0,0,0.2);
				color: #fff;
				font-size: 1.875rem;
				text-align: center;
				line-height: 3.75rem;
				position: absolute;
				top: 4.5rem;
				display: none;
			}
			//左右按钮不同样式
			#left{
				left: 0;
			}
			#right{
				right: 0;
			}
			//小圆点样式
			#list{
				list-style: none;
				position: absolute;
				bottom: 1.25rem;
				left: 10.25rem;
			}
			#list li{
				float: left;
				width: 1.5rem;
				height: 1.5rem;
				background-color: #aaa;
				border-radius: 50%;
				text-align: center;
				line-height: 1.5rem ;
				margin-left:1rem;
			}
		</style>

首先看一下静态页面效果图

重点来了，js原生代码

接下来，我们就让这个轮播，动起来。
我们首先需要知道，一个轮播图需要实现的功能：
1.图片自动轮播（滑入轮播图停止轮播）
2.点击左右按钮切换上下张图片
3.鼠标滑过小圆点切换到制定图片

既然知道了大概步骤，下面，我们就来一步步去实现它。

//首先先获取到我们需要用到的元素节点。
	var jsbox = document.querySelector('#box');
	var jspic = document.querySelector('#pic');
	var jsleft = document.querySelector('#left');
	var jsright = document.querySelector('#right');
	var jslistarr = document.querySelectorAll('#list li');

// 将第一个li标签的背景颜色设置为红色
	jslistarr[0].style.backgroundColor = 'red';
	
	// 启动一个定时器更换jspic中的src属性，达到图片轮播的目的
	var page = 1;
	var timer = setInterval(startloop,1000);
	function startloop(){
		page++
		changePage();
	}
	function changePage(){
		if(page==9){
			page=1;
		}
		if(page==0){
			page=8;
		}
		jspic.src = 'img/banner'+page+'.jpg'
		
		 // 让小圆点的颜色随着图片的轮播而改变
		 for( var i=0;i<jslistarr.length;i++){
			 jslistarr[i].style.backgroundColor = "#aaa";
		 }
		 jslistarr[page-1].style.backgroundColor="red";
	}
	//自动轮播已经好了，接着，鼠标滑入，停止轮播，显示左右按钮。鼠标滑出，继续轮播，按钮隐藏。
	jsbox.addEventListener('mouseover',overfunc,false);
		function overfunc(){
			// 停止定时器
			clearInterval(timer);
			// 显示左右按钮
			jsleft.style.display = 'block';
			jsright.style.display = 'block';
	}
	jsbox.addEventListener('mouseout',outfunc,false);
		function outfunc(){
			// 重启定时器
			timer = setInterval(startloop,1000);
			//隐藏左右按钮
			jsleft.style.display = 'none';
			jsright.style.display = 'none';
	}

// 下面，点击左右按钮切换图片
	// 首先，滑入滑出改变颜色深浅
	jsleft.addEventListener('mouseover',deep,false);
	jsright.addEventListener('mouseover',deep,false);
	function deep(){
		this.style.backgroundColor = 'rgba(0,0,0,0.6)';
	}
	jsleft.addEventListener('mouseout',nodeep,false);
	jsright.addEventListener('mouseout',nodeep,false);
	function nodeep(){
		this.style.backgroundColor = 'rgba(0,0,0,0.2)';
	}
	
	// 然后给左右按钮点击事件，点击切换
	jsright.addEventListener('click',function(){
		page++;
		changePage();
	},false);
	
	jsleft.addEventListener('click',function(){
		page--;
		changePage();
	},false);

//最后一步，鼠标滑过小圆点，切换到指定图片
	for(var i = 0;i<jslistarr.length;i++){
		jslistarr[i].index = i+1;
		jslistarr[i].addEventListener('mouseover',function(){
			// page = parseInt(this.innerHTML); 
			page = parseInt(this.index);
			changePage();
		},false);
	}

附上最终效果图

##OK,一个炫酷的轮播图完成了。