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.714922.com-彩1彩票app-| www.129797.com-爱彩乐福彩3d| www.7393.org-哈市彩站出兑转让| www.34824.com-中国福利彩票宗旨| www.36xq.com-台湾大福彩开奖结果| www.8767.biz-买彩票的概率| www.904446.com-合买彩票网站| www.185793.com-时时彩宝典-| www.038778.com-经彩网彩票走势图| www.725278.com-珐琅彩水杯-| www.2909.cc-一分钟时彩能玩吗| www.43213.com-彩客旧版客户端下载| www.213508.com-福建快三规则| www.033637.com-乐和彩彩票靠谱吗| www.321038.com-新3d彩票官网| www.01260.com-趣彩屏-| www.477296.com-7星彩玩法开奖公告| www.976491.com-体育彩票河南| www.219452.com-快频的彩票原理| www.019602.com-湖南体彩赛车官网| www.86834.com-黑龙江省快三| www.283528.com-湖北快三投注计划| www.006727.com-福彩20算五-| www.112273.com-注册送33彩票| www.896523.com-派彩手机版吗| www.549751.com-彩播直播平台| www.65664.com-幸运快三开奖查询| www.303045.com-22彩票输死人| www.575198.com-外国彩票开奖视频| www.705358.com-体育彩票兑奖平台| www.819257.com-非你莫属彩票哥求职| www.932223.com-晨兴彩票app| 易彩堂www.55885h.com| www.212826.com-私彩代理提成| www.306714.com-k8彩票网-| www.826038.com-江苏快三qq群骗局| www.390001.com-多玩彩票下载安装| www.0mh.com-内蒙古体彩赛马| www.239736.com-王者彩票下载手机版| www.160581.com-乐彩网摘网-| www.vn71.com-上海福彩网官方首页| www.897763.com-福利彩票经典广告语| www.974689.com-大掌柜彩票网址| www.cp9228.com-中彩彩票怎么玩| www.36076.com-福彩快乐12加奖金| www.3611.win-竞彩足球直播在哪看| www.12829.com-周二篮球竞彩结果| www.58618.cc-安彩高科公告| www.012190.com-彩票平台搭建| www.655248.com-湖北快三开走势图| www.744099.com-打福利彩票绝招| www.56826.cc-购乐彩票-| www.830909.com-空飘彩烟多少钱| www.cp3778.com-幸运快三是不是骗局| www.323185.com-头彩彩票网站合法吗| www.090528.com-投注彩票兼职是真的| www.6582.wang-鑫彩网是合法的吗| www.1576.top-彩宝彩票吧-| www.259796.com-京东彩票软件| www.358290.com-江苏福彩十二选五| www.445112.com-长治彩票饱和度| www.0404.online球队买彩票-| www.6190.in-掌上福彩下载| www.0100.love-打彩票的后果很严重| www.6971.biz-九宫八卦彩票选号器| www.20aj.com-彩票挂机系统| www.0610.cm-怎么防止彩票连挂| www.8509.org-合肥竞彩店转让消息| www.47031.com-菲博时时彩平台| www.98223.com-美国一分彩走势图| www.988581.com-竞彩三个月挣一千万| www.gb99.com-有中福利彩票的人吗| www.g00.in-五分彩-| www.85483.com-2805c0m彩票| www.18317.com-今天福彩3d故事迷| www.733825.com-3d杀和尾凤彩网| www.640293.cc-新浪爱彩怎么下载| www.751977.com-福彩3d怎样定大小| www.836116.com-顺丰彩票可以相信吗| www.902217.com-黑彩定罪-| www.959166.com-御彩轩ios-| 亿彩彩票www.588yc.com| www.77033.cc-玩彩论坛-| www.110695.com-过年后彩票几号开始| www.209056.com-爱乐彩票官网| www.160100.com-幸运快三注册邀请码| www.887014.com-帮买彩票是什么骗局| www.247665.com-大发快三国家承认吗| www.354722.com-彩赢家福利彩票| www.529318.com-这附近有彩票店吗| www.638731.com-800万彩票网站| www.706170.com-天天彩选四中奖号码| www.776392.com-湖北快三追号| www.871093.com-正规手机彩票投注| www.973488.com-彩虹之下赵雷歌词| www.bf46.com-淘宝彩票走势图| www.431605.com-竞彩加时赛进球算吗| www.561532.com-鸿发彩票怎么样| www.9634.loan-排三杀号彩宝贝| www.293792.com-老彩票骗局揭秘| www.77cb.com-彩迷直通车自动更新| www.587221.com-篮彩有什么app| www.491888.com-凤凰彩票兼职赚钱| www.72pn.com-365约彩官方网站| www.191729.com-自动追号彩票平台| www.943259.com-连中彩票老版本| www.520798.com-石家庄福彩-| www.414904.com-竞彩怎么m串n| www.444326.com-彩38网投靠谱吗| www.521098.com-利鑫彩票-| www.575169.com-福彩3d33期开奖| www.629795.com-打彩票的技巧规律| www.691507.com-彩票倍投预算软件| www.755848.com-苹果4彩膜-| www.810098.com-澳客竞彩足球比分| www.870505.com-152彩票网怎么样| www.gr01.com-快三推荐号河北| www.wu83.com-快三助手电脑版下载| www.00ch.com-现在的彩票还能买吗| www.77xs.com-卖私彩抓老板还是抓| www.3088.gg-彩票老司机靠谱吗| www.7411.pw-美术色彩图片| www.h23.xyz-七星彩安然专家预测| www.915.me-福彩3d杀码大全| www.537070.com-什么是彩色-| www.590714.com-竞彩今日过关推荐| www.647845.com-正规网络彩票网站| www.500967.com-易彩是真的还是假的| www.4728.vip-彩票50万照片| www.378498.com-时时彩平台大全| www.348289.com-乐彩网专家怎么样| www.040056.com-永诚彩票网官方网址| www.143325.com-彩运8网站-| www.271434.com-立彩彩票下载安装| www.940.xyz-体育彩票试机号码| www.2156.wang-福彩三地胆码杀码| www.896156.com-趣头条彩票是骗局吗| www.mo64.com-彩票七星彩中奖规则| www.560687.com-彩票属于五行属什么| www.878166.com-福彩图迷总汇牛材网| www.793026.com-福彩销售点投诉电话| www.144120.com-福利彩票真有人中吗| www.2081.net-驿站彩票-| www.7916.me-天天彩票苹果版下载| www.18070.com-湖南福彩票网| www.qg48.com-新浪彩票图表| www.385627.com-福利彩票过期| www.31972.com-快发彩票app下栽| www.003541.com-关于彩票的搞笑语录| www.0817.win-足球彩票在哪里买| www.585633.com-体育彩票双色| www.677236.com-爱投彩票能挣钱吗| www.769852.com-好彩店app官网| www.833344.com-体彩店二维码| www.891582.com-彩票大数据软件| www.965094.com-福彩快三推算方法| www.am21.com-贵州省福利彩票网站| www.318859.com-北京快三爱乐彩| www.399780.com-七星彩第七位走势| www.515080.com-彩票系统技术| www.192392.com-甘肃快三开奖号结果| www.8933.top-兴盛彩票v3登录| www.729529.com-包头市彩票站点大全| www.828696.com-七天彩主页快三|