jQuery图标导航滑动切换全屏选项卡代码



116 461 154



特效描述:jQuery图标导航 滑动切换 全屏选项卡,jQuery全屏背景图片选项卡切换,制作大气的图标导航滑动控制对应的选项卡tab切换代码。

代码结构

1. 引入CSS

<link href="css/base.css" rel="stylesheet" type="text/css"/>
<link href="css/home.css" rel="stylesheet" type="text/css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/SuperSlide.js"></script>

3. HTML代码

<div class="index-page">
	<div class="solution-more">
		<div class="solution-more-slide">
			<div class="container">
				<div class="hd">
					<ul>
						<li class="item-1 on">
							<i></i>
							<div class="text">
								<h3>新零售</h3>
								<p>线上线下全渠道覆盖</p>
							</div>
						</li>
						<li class="item-2">
							<i></i>
							<div class="text">
								<h3>新型O2O</h3>
								<p>满足社区电商多角色需求</p>
							</div>
						</li>
						<li class="item-3">
							<i></i>
							<div class="text">
								<h3>移动分销</h3>
								<p>微信分销解决方案</p>
							</div>
						</li>
						<li class="item-4">
							<i></i>
							<div class="text">
								<h3>跨境电商</h3>
								<p>成熟的跨境交易平台</p>
							</div>
						</li>
						<li class="item-5">
							<i></i>
							<div class="text">
								<h3>同城电商</h3>
								<p>本地特色购物平台</p>
							</div>
						</li>
						<li class="item-6">
							<i></i>
							<div class="text">
								<h3>连锁超市</h3>
								<p>提升效率,降低成本</p>
							</div>
						</li>
					</ul>
				</div>
				<ul class="bd" style="position: relative; width: 1920px; height: 600px;">
					<li class="item-1" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: list-item;">
						<div class="container">
							<div class="inner">
								<h2>新零售解决方案</h2>
								<dl class="intro">
									<dt>行业背景</dt>
									<dd>自马云提出新零售概念起,越来越多的公司开始将线上互联网力量与线下实体店终端结合,进一步推进线上线下一体化进程。为此模板堂推出新零售解决方案,以减少企业的落地成本,打造线上+线下+物流相结合的新零售平台</dd>
									<dt>方案效益</dt>
									<dd>助力企业快速打造以消费者为核心,在会员、支付、库存、物流等数据方面全方位打通的新零售平台</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取方案</a>
								</div>
								<div class="example">
									<h3>相关客户案例</h3>
									<ul>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo4.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-2" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>新型O2O解决方案</h2>
								<dl class="intro">
									<dt>行业背景</dt>
									<dd>传统O2O只是线上订货,线下送货,已经无法满足现代化电商模式的需求,模板堂旗下的ECJia到家产品,满足从消费者、商家管理、平台运营、配送员送货等多角色需求,打造新型O2O电商模式</dd>
									<dt>方案效益</dt>
									<dd>整合周边门店入驻,对接配送员上门送货,POS机收款等一站式社区电商服务</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取方案</a>
								</div>
								<div class="example">
									<h3>相关客户案例</h3>
									<ul>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo2.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-3" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>移动分销解决方案</h2>
								<dl class="intro">
									<dt>移动分销解决方案</dt>
									<dd>分销作为网络推广的热门玩法,必须了解其深层的业务模式,根据业务模式的特点开发功能,模板堂根据微信易于分享推广的特性,用针对性的产品为商家打造移动分销解决方案</dd>
									<dt>方案效益</dt>
									<dd>快速建立一支分销军团,让消费者变成你的销售员,迅猛增长销量</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取方案</a>
								</div>
								<div class="example">
									<h3>相关客户案例</h3>
									<ul>
										<li>
											<img src="img/logo4.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-4" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>跨境电商解决方案</h2>
								<dl class="intro">
									<dt>行业背景</dt>
									<dd>近年来跨境外贸交易进行的如火如荼,随着消费主力群体从以80后为代表扩散到以泛90后、95后为代表,消费观念也从讲求性价比转向注重品质,对进口优质商品的需求爆发式增长</dd>
									<dt>方案效益</dt>
									<dd>模板堂通过跨境通产品,为你打造一个专业的跨境电商交易平台</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取方案</a>
								</div>
								<div class="example">
									<h3>相关客户案例</h3>
									<ul>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo2.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-5" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>同城电商解决方案</h2>
								<dl class="intro">
									<dt>行业背景</dt>
									<dd>随着以O2O模式为核心、移动互联网为载体的电商3.0时代正式来临,本地化电商优势渐显。现今同城网购越发火热,各大城市电商购买潜力和价值尚待开发</dd>
									<dt>方案效益</dt>
									<dd>面向同城零售交易,搭建线上电商平台,集合当地特色商品向消费者提供一站式综合服务</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取方案</a>
								</div>
								<div class="example">
									<h3>相关客户案例</h3>
									<ul>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
										<li>
											<img src="img/logo4.png" alt="">
										</li>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
					<li class="item-6" style="position: absolute; width: 1920px; left: 0px; top: 0px; display: none;">
						<div class="container">
							<div class="inner">
								<h2>连锁超市解决方案</h2>
								<dl class="intro">
									<dt>行业背景</dt>
									<dd>随着亚马逊的无人自助店的问世,传统连锁超市已经逐渐面临着竞争压力,如何更高效的运营门店,给消费者带来便捷,同时降低门店的人员成本,成为了众多连锁超市商家一直思考的问题</dd>
									<dt>方案效益</dt>
									<dd>通过技术让消费者自动扫码结算,无需注册,降低门店运营成本</dd>
								</dl>
								<div class="btn-wrap">
									<a href="javascript:;">了解详情</a>
									<a href="javascript:;" class="btn-2">获取方案</a>
								</div>
								<div class="example">
									<h3>相关客户案例</h3>
									<ul>
										<li>
											<img src="img/logo1.png" alt="">
										</li>
										<li>
											<img src="img/logo2.png" alt="">
										</li>
										<li>
											<img src="img/logo3.png" alt="">
										</li>
									</ul>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(".solution-more-slide").slide({
		effect: 'fold'
	});
	//hover
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换 滚动切换 滚动条切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 全屏焦点图 渐隐切换 全屏切换 淡出淡进 淡出 淡进 宽屏全屏 宽屏 全屏 页面全屏 页面宽屏 其他 滑动导航菜单 滑动导航 滑动菜单 导航切换 菜单切换 图片淡出淡进 图片淡出 图片淡进 图片全屏 文字淡出淡进 文字淡出 文字淡进 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到