轮播图系列教程（一）——和派孔明

//<span style="font-size: 18px; "><strong>简易左右切换轮播图系列教程（一），欢迎阅读javascript轮播图系列教程，本教程将由简单到复杂逐布实现轮播图效果。</strong></span>

<style>
*{margin:0;padding:0;list-style:none;}
img{border:none;}
body{background:#ecfaff;}
.box{width:1000px;height:409px;overflow:hidden;
position:relative;margin:0 auto;background:#ccc;}
.box ul{position:absolute;top:0;left:0;z-index:1;width:99999px;}
.box ul li{float:left;width:1000px;height:409;}
.box ul img{float:left;width:1000px;height:409;}

.box p{width:60px;height:60px;line-height:60px;
color:#fff;text-align:center;background:#333px;
border:1px solid #ccc;position:absolute;top:170px;
z-index:2;cursor:pointer;font-size:50px;}
.box .prev{left:10px;}
.box .next{right:10px;}
</style>

<pre name="code" class="javascript"><span style="font-size:18px;"><strong><script>
window.οnlοad=function(){
	var oBanner=document.getElementById('banner');
	var oUl=oBanner.getElementsByTagName('ul')[0];
	var aLi=oUl.children;
	var oPrev=oBanner.getElementsByTagName('p')[0];
	var oNext=oBanner.getElementsByTagName('p')[1];
	var now=0;

	//ul宽度
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

	oNext.οnclick=function(){
		now++; //计算
		if(now==aLi.length) now=0;
		oUl.style.left=-now*aLi[0].offsetWidth+'px';
	};

	oPrev.οnclick=function(){
		now--;//计算
		if(now==-1) now=aLi.length-1;
		oUl.style.left=-now*aLi[0].offsetWidth+'px';
	};
};
</script></strong></span>

<span style="font-size:18px;"><strong><div class="box" id="banner">
	<p id="prev" class="prev">«</p>
	<p id="next" class="next">»</p>
<ul>
	<li><a href="javascript:;"><img src="images/1.jpg" alt="广告一" /></a></li>
	<li><a href="javascript:;"><img src="images/2.jpg" alt="广告一" /></a></li>
	<li><a href="javascript:;"><img src="images/3.jpg" alt="广告一" /></a></li>
	<li><a href="javascript:;"><img src="images/4.jpg" alt="广告一" /></a></li>
	<li><a href="javascript:;"><img src="images/5.jpg" alt="广告一" /></a></li>
</ul>
</div></strong></span>