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天

知道了
百盈PK10 www.451499.com-福彩快乐十分计划| www.67io.com-太原体彩电话| www.3873.cn-3d彩报蓝精灵| www.09749.com-福彩三d大花猫| www.b99.cc-网投时时彩骗局揭秘| www.980727.com-火箭彩票app安卓| www.363606.com-杏彩168是真的吗| www.31737.com-福利彩票快三店转让| www.88mi.cc-镀铝锌彩涂板| www.833723.com-赢家彩票用户注册| www.z03.cc-昨晚福彩中奖号码是| www.75zk.com-体彩八卦图-| www.3051.biz-七星彩剧透-| www.8688.vip-海南7星彩规律图| www.780035.com-排列5彩票中奖规则| www.11965.com-山东彩票手机投注| 购彩网www.85gcw.com| www.18818.cc-福彩三地万能六码| www.1290.wang-时时彩免费试玩| www.97nz.com-正宗港彩王-| www.611640.com-彩票投注软件哪个好| www.zu57.com-安微福彩快三结果| www.874480.com-新浪彩票网站首页| www.303106.com-苏州老快三-| www.673702.com-古建彩绘种类| www.ha21.com-彩票66-| www.67np.com-皇冠竞彩下载| www.cp398.cc-快三最大的漏洞| www.6861.cm-好彩爆珠香烟图片| www.175208.com-江苏快三开奖详情| www.335303.com-3d彩票的玩法介绍| www.528532.com-今天彩票预测号码| www.622999.cc-体彩大乐透网上机选| www.353593.com-中国体彩的老板是谁| www.519611.com-港彩必中10码| www.6968.vip-66彩票下载安装| www.703361.com-胜利彩票怎么注册| www.859203.com-体彩排三开奖号查询| www.950681.com-彩票开奖器傲然| 500彩票www.50064c.com| www.125663.com-玩彩票输了怎么回血| www.1225.club-香港人博彩论坛| www.220427.com-美的快三秒热水器| www.875167.com-快三稳赚宝典| www.fm96.com-八手巴购大发快三| www.215449.com-玩彩-| www.082059.com-快三哪里能玩| www.089938.com-江苏体育彩票网| www.219681.com-玩彩平台-| www.331647.com-彩票官网能买彩票吗| www.507976.com-体彩排三开奖视频| www.595208.com-好彩赢三张游戏下载| www.670441.com-106在线彩票安卓| www.241933.com-体彩门头图片大全| www.351012.com-鸿运彩票与500购| www.497354.com-首彩葡萄酒-| www.5900.biz-万州体彩中心| 恒彩www.hcw018.com| www.46cl.com-印象彩-| www.9147.biz-彩娱乐平台登录| www.895350.com-爱彩票快三软件下载| www.964082.com-湖北体彩网首页| www.cai9344.com上海快三形态走势| www.la65.com-购彩平台排行榜| www.b85.com-南国七星彩图规论坛| www.896292.com-优势的彩票合买系统| www.vk47.com-5分彩开奖结果查询| www.rq60.com-广西快三一定牛今| www.9xt.com-澳洲5分彩杀号技巧| www.280056.com-代玩彩票赚佣金| www.4815.cc-双色球快三多少钱| www.25657.cc-彩库宝典图库版本| www.wt66.cc-申请28元免费彩金| www.01305.com-彩票计划哪个准| www.ef11.com-亚投彩票app下载| www.0at.com-足彩外围漏洞| www.387500.com-七星彩历史今天开奖| www.29667.com-淘宝酷彩会有假吗| www.973501.com-彩虹歌曲羽泉| www.ca1.com-北京快三助手免费版| www.ou87.com-上海快三就开奖| www.08zu.com-广西新粤彩-| www.381.cm-牛彩彩票软件下载| www.74474.com-七乐彩4十1中多钱| www.057082.com-二分快三遗漏| www.42456.com-华润彩票-| www.491914.com-临夏彩票大奖得主| www.630269.com-55215彩吧图| www.720229.com-彩票每天几点不能买| www.902155.com-贷款买3d黑彩5码| www.fi09.com-所有的彩票网站大全| www.4pz.cc-足球竞彩二串一心水| www.538.la-彩票中奖查七星彩| www.9439.top-华人彩票违法吗| www.84487.com-彩钢板规格型号| www.057818.com-福彩3d第三版彩图| www.71657.com-天天彩3d开奖结果| www.599174.com-易彩乐正规吗| www.896821.com-手机彩票自动投注| www.ap29.com-福彩北京快三走势图| www.39388.com-鑫彩网app主页| www.287679.com-九购十分彩正规吗| www.460052.com-5颗星彩票下载安装| www.566782.com-网赌快三输了很多钱| www.665984.com-好多彩票一起玩的网| www.757523.com-大鹏金服彩票| www.858896.com-双色球彩票开奖预测| www.959536.com-彩名堂网页版| www.xj04.cc-好彩三中奖规则| www.cp769.com-分分快三哪个平台好| www.077106.com-买哪种彩票靠谱| www.298981.com-彩04app-| www.505580.com-5o5彩票-| www.669500.com-买啥彩票是6个数| www.943709.com-快三代理注册公司| www.63751.cc-焦作泌阳彩礼多少| www.147856.com-福彩全民中奖独胆| www.267908.com-广西快三一定牛网| www.368632.com-体彩开机号今天晚上| www.505959.com-财政部彩票司| www.610482.com-福彩快三购买| www.747769.com-大富豪彩票靠谱吗| www.854999.com-彩票能赢钱吗| www.959513.com-快三必中软件下载| www.qy25.com-全国最大的快三| www.9799.wang-七星彩多长时间过期| www.986596.com-亚盘足彩网-| www.yl12.com-黔东南福彩中心地址| www.728983.com-双彩图3d原创图谜| www.761202.com-彩礼钱是给谁的| www.11351.com-凤凰竞彩推荐单| www.555285.com-微彩是赌博吗| www.024793.com-易彩集团下载| www.177061.com-三分快三怎么算| www.xh41.com-够力七星彩下载苹果| www.9918.love-天下彩免费资料综合| www.389513.com-体彩排五的开奖号码| www.127285.com-彩客网旧版app| www.97122.com-足彩去哪里买得到| www.111926.com-好运彩彩票网可信吗| www.189982.com-3d新彩吧-| www.69976.cc-盛世彩票ss55| www.671989.com-体彩19019开奖| www.8969.top-福利彩票摇一摇| www.301305.com-七星彩0到9排列| www.370271.com-小康彩票是真是假| www.517312.com-金码日历七星彩| www.603916.com-福彩了d-| www.667482.com-武汉没有福彩中心吗| www.747803.com-彩运宝软件下载官网| www.438354.com-体育彩票店在哪里好| www.547369.com-博码彩票-| www.606203.com-彩界精英独胆| www.666629.cc-梦网彩票直播版区| www.0007.in-那种彩票是8位数字| www.8512.cm-乐艺彩票997软件| www.24469.com-彩铅画古装-| www.026474.com-竞彩篮球合买推荐| www.100455.com-手机买福利彩票| www.162180.com-彩乐汇登录-| www.113245.com-中奖彩票ios版| www.3435.in-福利彩票店加盟费用| www.260016.com-宁夏彩票中奖记录| www.774598.com-实亿彩票app|