原生js是实现类似淘宝首页的banner栏

最新推荐文章于 2022-05-06 16:01:13 发布

tanmuxue

最新推荐文章于 2022-05-06 16:01:13 发布

阅读量984

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/tanmuxue/article/details/51547355

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<div class="bg clearfix">
	<div class="title">
		<a class="on" href="javascript:">最热团购</a>
		<a href="javascript:">商城特惠</a>
		<a href="javascript:">名品推荐</a>
		<a href="javascript:">缤纷活动</a>
	</div>
	<ul>
		<li class="active">
			<img class="active" src="img/1.jpg" alt="">
			<img src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<h3>
				<a class="hov" href="javascript:">优惠1</a>
				<a href="javascript:">优惠2</a>
				<a href="javascript:">优惠3</a>
				<a href="javascript:">优惠4</a>
			</h3>
		</li>
		<li >
			<img class="active" src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<img src="img/5.jpg" alt="">
			<h3>
				<a class="hov" href="javascript:">优惠1</a>
				<a href="javascript:">优惠2</a>
				<a href="javascript:">优惠3</a>
				<a href="javascript:">优惠4</a>
			</h3>
		</li>
		<li>
			<img class="active" src="img/3.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<img src="img/5.jpg" alt="">
			<img src="img/6.jpg" alt="">
			<h3>
				<a class="hov" href="javascript:">优惠1</a>
				<a href="javascript:">优惠2</a>
				<a href="javascript:">优惠3</a>
				<a href="javascript:">优惠4</a>
			</h3>
		</li>
		<li >
			<img class="active" src="img/6.jpg" alt="">
			<img src="img/5.jpg" alt="">
			<img src="img/4.jpg" alt="">
			<h3>
				<a class="hov" href="javascript:">优惠1</a>
				<a href="javascript:">优惠2</a>
				<a href="javascript:">优惠3</a>
			</h3>
		</li>
	</ul>
</div>

@charset "UTF-8";
body{
	font-size: 12px;
	font-family: "宋体";
}
.clearfix:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; }
.clearfix{zoom: 1;}
*{
	padding: 0;
	margin: 0;
}
img{
	vertical-align: text-top;
}
ul li{
	list-style: none;
}
a{
	text-underline: none;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}
.bg{
	width: 850px;
	margin: 0 auto;
	height: 291px;
	border: 1px solid #f2f2f2;
	background: #fff;
}
.title{
	display: flex;
	flex-direction: column;
	width: 100px;
	height: 100%;
	float: left;
}
.title>a{
	width: 100%;
	display: flex;
	flex: auto;
	justify-content: center;
	align-items: center;
	background: #ccc;
	color: #000;
	font-size: 16px;
	border-bottom: 1px solid #fff;
	text-align: center;
}
.title>a:last-of-type{
	border-bottom:none ;
}
ul{
	float: left;
}
ul li{
	position: relative;
	display: none;
}
ul>li>img{
	display: none;
}
ul .active{
	display: block;
}
ul>li>h3{
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	display: flex;

}
ul>li>h3>a{
	flex: auto;
	padding: 10px 0;
	justify-content: center;
	align-items: center;
	text-align: center;
	border-right: 1px solid #fff;
	background: cornflowerblue;
}
ul>li>h3>a:last-of-type{
	border-right: none;
}
.title .on{
	background: #fff;
}
li>h3 .hov{
	background: brown;
}

<script>
	window.οnlοad=function () {
		var oLeft=document.getElementsByClassName("title")[0];
		var oLefta=oLeft.getElementsByTagName("a");
		var oUl=document.getElementsByTagName("ul")[0];
		var oLi=oUl.getElementsByTagName("li");
		for(var i=0;i<oLefta.length;i++){
			oLefta[i].index=i;
			e(oLi[i]);
			oLefta[i].οnclick=function () {
				var That=this;
				for(var j=0;j<oLefta.length;j++){
					oLefta[j].className='';
					oLi[j].className='';
				}
				oLefta[That.index].className="on";
				oLi[That.index].className="active";
			}
		}
		function e(Li) {
			var oLia=Li.getElementsByTagName('a');
			var oImg=Li.getElementsByTagName("img");
			for(var k=0;k<oLia.length;k++){
				oLia[k].index=k;
				oLia[k].οnclick=function () {
					for(var z=0;z<oImg.length;z++){
						oImg[z].className='';
						oLia[z].className='';
					}
					oImg[this.index].className='active';
					oLia[this.index].className='hov';
				}

			}



		}
	}
</script>