原生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实现淘宝部分界面

网页小测试代码: 无标题文档 #kuangjia { height: auto; width: 100%; margin-top: 0px; margin-right: auto...
  • YZi_Angel
  • YZi_Angel
  • 2015年05月04日 15:12
  • 2876

关于用原生js实现tab栏的切换:

今天并不是很忙 ,然后就复习了原生的js。如何用原生js实现tab栏的切换呢?请看下图:当鼠标在女装男装时,显示女装男装。 当鼠标点击鞋子时,出现鞋靴的盒子。 准备一个测试的demo: 举个栗子...
  • nevercurtain
  • nevercurtain
  • 2016年12月20日 23:38
  • 2279

iOS-导航栏,类似淘宝“我的淘宝”导航栏

大牛路过还请赐教~实现的效果效果描述: 1、个人中心页面,上滑操作时,导航栏从无到有渐变,背景是一张图片,不是颜色。 2、设置按钮不管导航栏是有还是无,始终存在显示。 3、标题...
  • fanxiaomeng92
  • fanxiaomeng92
  • 2017年05月26日 16:54
  • 451

仿淘宝Banner:左右滑动ViewPager+最后一张滑动查看详情

手机淘宝上能够看出来这个效果,在产品图片Banner上滑动的时候,滑动到最后一页的时候可以跳转详情,其实也就是给其最后一页跳转监听,并且实现页面跳转。效果图如下: 主要使用了ViewPager+Ci...
  • u010844189
  • u010844189
  • 2016年05月26日 14:40
  • 1964

Jquery实现仿淘宝天猫左侧分类导航插件

插件参数配置如下:1、 target: $('#Z_RightSide')//绑定倚靠右边容器的ID2、 fTop: 60,// 距离顶部距离3、 cTop: 100,// 滚动条滚动多少像素后开始折...
  • yancongmin0702
  • yancongmin0702
  • 2014年04月27日 08:26
  • 2087

京东首页之nav导航栏、banner广告部分、footer备案号

项目回顾:上一篇博文主要讲了如何实现京东首页的页面顶部和Logo&搜索框部分; 里面主要知识:利用列表作划分鲜明的文字部分,相对定位和绝对定位去实现弹框效果。今天我们这篇博文主要是简单介绍京东首页的...
  • Andone_hsx
  • Andone_hsx
  • 2017年01月13日 00:29
  • 877

原生JavaScript实现的alert弹框

原生JavaScript实现的alert弹框
  • helloxiaopanpan
  • helloxiaopanpan
  • 2017年02月18日 14:30
  • 910

Javascript小案例(一):仿淘宝搜索框用户输入事件的实现

淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示:(截图日期:2017年6月18日)大家可以看到,当页面一打开,搜索框中就可以看到灰色字体“少女高跟鞋”,还有闪烁的...
  • sinat_34647836
  • sinat_34647836
  • 2017年06月18日 16:13
  • 1776

iOS 模仿淘宝的首页UI

要看UICollectionView的可以关了 全程都是tableview加button和autolayout 最近用autolayout真是越来越顺手了 Level:菜鸟 环境:Xcode7...
  • qq_30513483
  • qq_30513483
  • 2016年04月19日 14:44
  • 3834

RecyclerView加载多类型item 实现淘宝首页布局

主要为大家介绍如何用RecycleView来实现淘宝首页复杂的布局,做电商类app的小伙伴们可以略作参考。首先上效果图: 下面说一下实现方式,主要思路就是给RecyclerView设置一个列数为x的...
  • a466302603
  • a466302603
  • 2017年11月01日 10:47
  • 255
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:原生js是实现类似淘宝首页的banner栏
举报原因:
原因补充:

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