利用jQuery实现滑动切换全屏选项卡代码



43 170 57



特效描述:利用jQuery实现 滑动切换 全屏选项卡代码,利用jQuery实现滑动切换全屏选项卡代码

代码结构

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>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 全屏焦点图 全屏切换 宽屏全屏满屏 图片全屏 文字切换 背景切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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