关闭

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

标签: javascript
193人阅读 评论(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.onload=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].onclick=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].onclick=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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20809次
    • 积分:504
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:9篇
    • 译文:0篇
    • 评论:0条
    文章分类