QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jquery云服务列表tab切换选项卡代码

原创商用 jquery云服务列表tab切换选项卡代码

jquery 实现TAB切换及动态效果切换企业建站云服务专家介绍, js css 分离,结构清晰简单, 上下结构 俩个效果,一个是按照毫秒添加时间自动滑动, 第二个效果,是常用TAB切换效果,jquery 均有注释,参数可修改,下载即可使用。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

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

2、head引入js文件

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

3、body引入HTML代码

<div class="aui-main">
	<div class="aui-section-box">
		<div class="aui-section-header">
			<p class="aui-section-header-title">全智能云服务专家</p>
			<p class="aui-summary">
				深度融合
				<a href="#">在线客服</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">客服机器人</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">呼叫中心</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">工单系统</a>
				<span class="aui-summary-tag">、</span>
				<a href="#">营销服务</a>
				,智能驱动每一个服务环节
			
			</p>
		</div>
		<div class="aui-section-body i-process">
			<ul class="aui-section-list">
				<li class="btn aui-section-list-item aui-section-list-item one">
					<img class="obj" src="./images/icon001.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item two">
					<img class="obj" src="./images/icon002.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item three">
					<img class="obj" src="./images/icon003.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item four">
					<img class="obj" src="./images/icon004.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item five">
					<img class="obj" src="./images/icon005.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
				<li class="btn aui-section-list-item six">
					<img class="obj" src="./images/icon006.png" alt="">
					<img class="shadow" src="./images/icon001-bg.png">
				</li>
			</ul>
		</div>
		<div class="aui-section-tab">
			<div class="hd aui-section-list">
				<ul>
					<li class="on">全渠道接入</li>
					<li>智能机器人</li>
					<li>客户服务</li>
					<li>用户行为洞察</li>
					<li>智能营销</li>
					<li>统一管理分析</li>
				</ul>
			</div>
			<div class="bd aui-section-info">
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item001.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">移动App</p>
									<p class="icon-text">iOS、Android</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item002.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">网页咨询</p>
									<p class="icon-text">Web、Wap、H5</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item003.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">微信</p>
									<p class="icon-text">公众号及小程序</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item004.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">呼叫中心</p>
									<p class="icon-text">手机、电话</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item005.png" alt="">
								</div>
								<div class="icon-main">
									<p class="icon-title">自定义消息接口</p>
									<p class="icon-text">按企业需求接管消息</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item006.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">服务先知</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item007.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">服务先知</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item008.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">服务先知</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item009.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">智能分流</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item010.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">人机协作</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item011.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">语音识别</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item012.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">CRM对接</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item013.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">工单流转</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item015.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">访问统计</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item016.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">访问轨迹</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item017.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">访问名片</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item018.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">用户画像</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item019.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">关键环节营销</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item020.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">主动发起会话</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
				<ul>
					<li>
						<dl>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item021.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">客服管理</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item022.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">客户管理</p>
								</div>
							</dd>
							<dd class="clearfix">
								<div class="icon-icon">
									<img src="images/icon-item023.png" alt="">
								</div>
								<div class="icon-main icon-main-top">
									<p class="icon-title">数据分析</p>
								</div>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">

	jQuery(".aui-section-tab").slide({
		effect: "fade",
		autoPlay: true,
		trigger: "mouseover",
		delayTime: 500
	});

	$(function() {

		$(".i-process .btn").eq(0).addClass("cur")

		var LightNum = 0
			, LightAuto = setInterval(function() {

			LightNum++;

			if (LightNum == $(".i-process .btn").length) {

				LightNum = 0

			}

			$(".i-process .btn").eq(LightNum).addClass("cur").siblings().removeClass("cur")

		}, 2500);

	});
	$(function() {

		$('.banner-contorl li').on('click', function() {

			var index = $(this).index();

			change(index, 'ctrl');

		});

	});

</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
金山彩票 www.910111.com-粤彩联盟网址| www.52109.com-惠普彩色打印机卡纸| www.2892.top-腾讯分分彩龙虎技巧| www.71gd.com-恒彩地址-| www.9373.cn-彩九c9con-| www.76759.com-竞彩足球咨询中心| www.90xb.com-小米系统彩蛋| www.3599.cc-全民网彩票-| www.24446.com-双色球彩宝贝比较器| www.99462.com-体彩七位数中奖金额| www.165127.com-中学生跟计划买彩票| www.286094.com-体彩排列三玩彩老头| www.io1.com-内蒙古一定牛彩票| www.a52.club-老彩民双色球心得| www.29807.com-昨晚福彩中奖号码| www.91690.com-上海澜赢骗彩票| www.579725.com-彩之云饭票是骗局吗| www.717275.com-福彩网是什么样子的| www.799650.com-224大众彩票| www.878231.com-盈彩彩票骗局揭秘| www.981191.com-凤凰彩票下载| www.cx66.com-时时彩哪个网站正规| www.831827.com-江苏休育彩票七位数| www.428319.com-七星彩在线模拟| www.668415.com-马来西亚博彩业现状| www.826234.com-官方彩票一分赛车| www.855.pw-时时彩五星最稳| www.852985.com-全中国彩票平台大全| 体彩天下www.tctx6.com| www.189404.com-uu快3手机购彩| www.933160.com-浙江恒旺快三| www.587782.com-施乐彩色复印机型号| www.86sk.com-彩票导航线路| 名门彩www.33997d.com| www.b54.in-江西快三走势十和值| www.241506.com-彩吧首页-| www.344118.com-大发时时彩邀请码| www.963776.com-能买彩票的软件| 大赢家彩票平台www.351731.com| www.362134.com-彩票少个角能兑奖吗| www.449771.com-武汉福彩兑奖中心| www.66jc.cc-亚投博彩-| www.197989.com-福彩快三河北的最坑| www.340005.com-彩票中大奖人的生活| www.502371.com-多彩投欺骗-| www.11395.cc-77彩票网app| www.892876.com-休育彩票大乐透分析| www.2333.in-吉林新快三玩法技巧| www.5624.top-哪个软件能手机购彩| www.br61.com-查一下七星彩开奖| www.ve46.com-南京福彩中心| www.24090.com-手绘彩铅山水画| www.796543.com-印尼分分彩开| www.872106.com-湖北彩票中奖图片| www.955452.com-彩票主任-| www.oj40.com-长春体彩中奖率| www.87og.com-淘宝买彩票刮刮乐吗| www.8986.net-新时代彩票可靠吗| www.55223.cc-时时彩怎么玩都是输| www.426226.com-彩票网福彩网| www.554917.com-彩657-| www.640181.com-高兴彩票下载| www.712656.com-99彩登录网址| www.785596.com-双彩球预测专家| www.860607.com-699彩票-| www.920976.com-彩神ivapp-| www.977133.com-306手机彩票网| www.cp1717.com-幸运快三全天计划| www.pb80.com-快三倍投是不是必死| www.s21.club-中国福利彩票怎么玩| www.46yx.com-竞彩店主自己刷销量| www.660726.com-体彩大乐透后区遗漏| www.788785.com-一个竞彩高手的理论| www.928962.com-鸿福彩票骗局| www.kg38.com-银川福彩中心地址| www.529593.com-中国彩票为什么造假| www.237204.com-e球彩开奖结果今天| www.759382.com-南阳彩开奖直播| www.726741.com-wcp玩彩票网| www.813935.com-河内1分彩规则| www.900111.com-288彩票苹果版| 爱彩www.001ac.com| www.2681.top-6288彩票软件| www.602276.com-彩票大奖家破人亡| www.322259.com-热门彩票大全| www.589415.com-河南快三开奖规则| www.689763.com-微彩吧平台-| www.779582.com-0365彩票苹果版| www.863268.com-胜负彩19007期| www.931798.com-腾讯分分彩追号计划| www.982364.com-北京时时彩开奖号码| www.eu1.com-快三秒热水器价格| www.130121.com-彩票两元网走势图| www.368828.com-18个同学合买彩票| www.466592.com-香港a23彩票网| www.546161.com-彩票店申请书怎么写| www.981538.com-博众彩票平台| www.db1.cc-极速时时彩开奖结果| www.5627.me-七星彩选号器手机版| www.555444.com-甘肃快三顺子| www.041124.com-哪些彩票出千万大奖| www.613294.com-中囯电脑体育彩票| www.06vf.com-彩天下137cm| www.335363.com-彩票弃奖法律分析| www.672682.com-重庆时彩跨度| www.737709.com-玩彩送彩金的网站| www.793875.com-体彩即时开奖结果| www.872155.com-黔西南福彩中心| www.925173.com-财神彩票网站| www.974428.com-哪个app能买彩票| www.kv6.com-安徽快三图-| www.358838.com-3d福彩之家-| www.056488.com-1分彩票走势图大全| www.278526.com-31彩票app-| www.467346.com-彩票投注计算| www.788525.com-365凤凰彩票| www.129086.com-彩客网大小分| www.023872.com-你是彩迷吗-| www.173593.com-彩神争8app-| www.736182.com-保定市彩票站转信息| www.302726.com-七星彩2233-| www.521061.com-彩票分析群-| www.461346.com-九九玩官方彩票| www.591522.com-澳门福彩开奖号码| www.684479.com-3d杀尾大全牛彩| www.827301.com-怎么戒掉网上玩彩票| www.931717.com-数字型彩票规律| 中国福利彩票www.6364r.com| www.7687.com-彩票中头奖捐款| www.115119.com-澳洲时时彩计划软件| www.496725.com-买彩票用哪个app| www.622077.com-彩赢国际注册| www.52gl.com-浙江时时彩开奖号码| www.4248.vip-七彩站点-| www.267338.com-500竞彩-| www.276543.com-吉林快三和值预测| www.482377.com-彩票三位数的是什么| www.618955.com-彩票中奖机下载| www.732592.com-汇彩阁聚彩阁出租| www.847850.com-山东彩礼排行榜| www.981076.com-七彩语文杯获奖名单| www.031003.com-珍爱网男生引导彩票| www.130732.com-体彩7星彩兑奖结果| www.583955.com-网页买彩票靠谱吗| www.6354.pw-衡阳福彩中心官网| www.817860.com-彩票专业走势| www.813591.com-彩票站加盟费多少钱| www.696684.com-竞彩网唯彩-| www.628967.com-彩票咋个买几个数字| www.727672.com-福彩中奖号码今日| www.825449.com-广州鸣彩官方网站| www.689907.com-三d彩票规则| www.791084.com-江苏彩票开奖七位数| www.872224.com-826手机购彩平台| www.933183.com-手机上玩快三犯法吗| www.974284.com-多乐彩票下载| 尊彩www.083067.com| www.mf69.com-好彩投彩票-| www.z24.mobi-爱购彩娱乐登录| www.42vj.com-今日开奖的彩票种类| www.2008.la-福彩过滤彩票软件| www.994348.com-彩票投注网站排行榜| www.mf35.com-福彩快乐-| www.02rp.com-测彩高手双色球专栏|