原生js写的轮播图

css

.slideShow{
	width:100%;
	height: 450px;
	margin: 0;
	padding: 0;
	margin: 0 auto;
}

.slideShow ul {
	list-style-type: none;
	/*去掉列表前面的.*/
	border: 2px solid #CCC;
	width: 100%;
	height: 450px;
	margin: 0;
	padding: 0;
}
.slideShow li {
	width: 100%;
	height: 450px;
	margin: 0;
	padding: 0;
}

.slideShow li img {
	width: 100%;
	height: 450px;
}

.show {
	display: block;
}

.hide {
	display: none;
}

前端

<div class="slideShow" onmouseover="stop();" onmouseout="lunbo();">
<ul id="photos">
	<li class="show"><img src="images/banner.jpg" /></li>
	<li class="hide"><img src="images/banner01.jpg" /></li>
	<li class="hide"><img src="images/banner.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function() {
	lunbo();
};
var ida;
var index = 3; //轮播次数  
function lunbo() {
	ida = setInterval(function() {
		//将所有li隐藏  
		var ul = document.getElementById("photos");
		//在元素下中子元素--获取所有li  
		var lis = ul.getElementsByTagName("li");
		for(var i = 0; i < lis.length; i++) {
			lis[i].className = "hide";
		}
		//将下一个li显示  
		index++;
		lis[index % lis.length].className = "show";
	}, 800);
}
function stop() {
	clearInterval(ida);
}
</script>