轮播图系列教程（二）选项卡思维——和派孔明

最新推荐文章于 2022-02-21 20:05:19 发布

xyphf_和派孔明

最新推荐文章于 2022-02-21 20:05:19 发布

阅读量795

点赞数

分类专栏：常用特效 DOM&BOM操作文章标签： BOM javascript DOM 工程师前端

本文链接：https://blog.csdn.net/xyphf/article/details/51043909

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

常用特效

24 篇文章 0 订阅

订阅专栏

<style>
*{margin:0;padding:0;list-style:none;font-family:"微软雅黑";}
.box{width:1000px;height:409px;border:7px solid #ccc;margin:0 auto;}
.box ul{list-style:none;}
.box ul li{display:none;}/*隐藏所有的li*/
.box ul li.cur{display:block;}/*显示鼠标当前的li*/

.dian{overflow:hidden;position:absolute;top:360px;left:920px;z-index:11}
.dian span{display:block;width:20px;height:20px;margin-right:8px;background-color:#fff;float:left;cursor:pointer;text-align:center;}
.dian span.active{background-color:red;}

#next,#prev{width:90px;height:90px;background:#ccc;
	color:#fff;text-align:center;line-height:90px;
	font-size:60px;position:absolute;top:160px;cursor:pointer;;
	z-index:10px;filter:alpha(opacity=50);opacity:0.5;}
#next:hover{filter:alpha(opacity=70);opacity:0.7;}
#prev:hover{filter:alpha(opacity=70);opacity:0.7;}
#next{left:1100px;}
</style>

<script>
window.οnlοad=function(){
	var oBox=document.getElementById('Box');
	var oPrev=document.getElementById('prev');
	var oNext=document.getElementById('next');
	var oLi=oBox.getElementsByTagName("li");
	var oDian=document.getElementById("dian");
	var oSpan=oDian.getElementsByTagName("span");
	var now=0;

	for(var i=0;i<oSpan.length;i++){
					oSpan[i].index=i;
					oSpan[i].οnclick=function(){
						for(var i=0;i<oSpan.length;i++){
							oSpan[i].className=oLi[i].className="";
						}
							this.className="active";
							oLi[this.index].className="cur";
					}
				}
				oNext.οnclick=function(){
						now++;
						if(now==oSpan.length){
							now=0;
						}
						for(var i=0;i<oSpan.length;i++){
							oSpan[i].className=oLi[i].className="";
						}
							oSpan[now].className="active";
							oLi[now].className="cur";			
				}
				oPrev.οnclick=function(){
							now--;
							if(now==-1){
							now=oSpan.length-1;
					}
							for(var i=0;i<oSpan.length;i++){
								oSpan[i].className=oLi[i].className="";
					}
							oSpan[now].className="active";
							oLi[now].className="cur";
				}
};
</script>

<body>
	<div class="box" id="Box">
		<div id="prev"><</div>
		<ul>
			<li class="cur"><img src="images/1.jpg"></li>
			<li><img src="images/2.jpg"></li>
			<li><img src="images/3.jpg"></li>
			<li><img src="images/4.jpg"></li>
			<li><img src="images/5.jpg"></li>
		</ul>
		<div class="dian" id="dian">
			<span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
		<div id="next">></div>
	</div>

注：本教程面向前端新手，请学有余力的同学自觉将重复使用的函数封装调用，并采用封闭空间（闭包）的形式加上定时器让轮播图自己动起来！