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

来源：互联网发布：国防强固必须优化编辑：程序博客网时间：2024/04/28 09:58

//<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.onload=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.onclick=function(){now++; //计算if(now==aLi.length) now=0;oUl.style.left=-now*aLi[0].offsetWidth+'px';};oPrev.onclick=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>

0 0