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

原创 2016年05月31日 17:09:19
<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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

原生js实现淘宝首页回到顶部效果

淘宝首页的回到顶部按钮是这样的:下拉到一定距离后按钮才显示出来,鼠标放到按钮上时,按钮背景会变成灰色,并且图标变成了文字。点击按钮缓慢回到顶部 我们先分析下实现这样的效果需要添加哪些事件。鼠标移进移...

viewflow实现类似淘宝,网易新闻的横幅banner,可循环自动播放

首先这里先声明引用了开源库viewflow,我这里只用了其中的ViewFlow和CircleFlowIndicator。想对viewflow有更多了解的可以去github下载viewflow开源包。 ...

类似淘宝、美团外卖等app首页 Demo分析 tableView+collectionView

To be or not to be, that’s a question. 近期开发过程中遇见了类似淘宝美团等app的首页制作,一开始思路不太明确,后来经过一番曲折后,终于相通了,现在把思路如下展示...

js实现类似淘宝继续拖动查看详情的弹簧效果

主要的思路是利用iscroll.js+css3实现该效果,首先在body放置两个box,每个box的宽高都是100%,给每个box初始化iscroll,检测每个box里面滑动区域的位置,当第一个box...

纯js实现类似淘宝星级评分功能

使用js实现简单星级评分

原生JS表格排序,实现淘宝商品列按价格要求等排序!

如何使用原生JS实现点击表格标题栏实现按要求自动排序功能?今天就教大家实现这个功能,这个功能可应用再淘宝等电商网站,按要求,如价格重新对商品排序 我就以同学曾经去百度面试遇到的一道面试题为例子 源...
  • wcslb
  • wcslb
  • 2016-11-20 17:40
  • 4271

js 仿淘宝首页最新图片幻灯切换效果

http://www.111cn.net/js_a/75/d05a5ed20e16085c19d50bfc9fd9652f.htm js 仿淘宝首页最新图片幻灯切换效果 js 仿淘...

淘宝首页商品广告图片左右轮播 JQuery JS特效

淘宝首页商品广告图片左右轮播 JQuery JS特效,点击左边向左按钮,广告图片向左滚动。 点击右边边向右按钮,广告图片向右滚动。具体效果请查看:在线演示  MJBlog(mj.588cy....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)