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天

知道了
彩票123现在叫什么名字 www.639273.com-新型彩票店-| www.822347.com-七星彩18147| www.894088.com-彩票聚财神app| www.960954.com-大乐彩票走势图表| 58彩www.55558c.com| www.ia63.com-彩678-| www.96ja.com-福建省福彩发行中心| www.295523.com-体育彩票快三奖励| www.88748.com-站点微信购买彩票| www.197657.com-七星彩兑奖结果| www.286084.com-公益彩-| www.367051.com-彩铅手绘星空图| www.457537.com-下载彩票2元网| www.553450.com-足彩三串一-| www.629038.com-亚洲28彩票-| www.vb1.com-发达娱乐彩票| www.44086.com-中彩在线这个软件| www.011136.com-彩票每周几开奖| www.101435.com-京彩-| www.199795.com-中原风彩大星走势图| www.275206.com-彩种多的彩票平台| www.673669.com-古建彩绘怎样立粉| www.691885.com-足彩十四场奖金查询| www.779317.com-天天彩票应用| www.857939.com-十分钟彩票平台| www.914492.com-黑彩案件-| www.969839.com-快乐双彩历史开奖| www.mk91.com-糖果派对免费彩金送| www.01en.com-带窗和彩虹的成语| www.71uv.com-恒彩88线路-| www.3702.com-苹果系统彩票软件| www.22658.cc-彩票店转让注意事项| www.90088.com-七彩影视app| www.101665.com-彩票开奖询-| www.247767.com-福彩作假曝光| www.356228.com-中国体育彩票中奖号| www.359912.com-七星彩是一元一注吗| www.354933.com-黑龙江体彩网官网| www.263584.com-中彩网综合走势图| www.81834.com-时时彩后二遗漏| www.202915.com-快三跨度图片| www.287575.com-彩之家邀请码| www.367871.com-3d过滤大彩网| www.483384.com-智慧彩票软件| www.562830.com-河南彩票中奖19亿| www.637270.com-福彩原副主任获刑| www.710981.com-购买足球足球彩票| www.808083.com-优选彩店怎么下载| www.899447.com-彩神通苹果版| www.967438.com-彩票实体店微信号| 豪彩VIPwww.987957.com| www.lf39.com-购彩网登录平台登录| www.g68.cc-万彩吧6合下载| www.41ex.com-彩票扑克三怎么玩| www.yd77.cc-辽宁体彩35选7| www.50eh.com-烟台福利彩票双色球| www.1155.biz-体彩宣传口号| www.02885.com-彩票app哪个号| www.55488.cc-寒江博彩堂-| www.770796.com-分分时时彩平台下载| www.513782.com-合买彩票骗佣金| www.639894.com-3000万彩票-| www.788875.com-竞彩足球彩票圈| www.946900.com-福彩三d开奖公告| www.404808.com-分分彩隔期买| www.34390.com-福彩3d菠萝彩魔图| www.974352.com-七乐彩奖池余额为0| www.kf84.com-网彩导航-| www.u24.in-唐山彩票店生意转让| www.968499.com-福彩真的能中大奖吗| www.pu8.com-南洋乐和彩开奖结果| www.wk57.com-延吉市体彩中心电话| www.25tu.com-创意彩票海报| www.228.in-爱够彩网址-| www.3289.biz-58彩票三分时时彩| www.09568.cc-大资本彩票官方网站| www.73837.cc-免费的彩票平台源码| www.538535.com-必赢彩票骗局揭秘| www.it09.com-彩票中奖概率汇总| www.31lp.com-玩彩票出什么号| www.2549.vip-彩票类app-| www.151012.com-七乐彩综合版走势图| www.307068.com-天津福彩官网| www.426258.com-中国足彩在线官网| www.467886.com-今日体育彩票中奖号| www.527044.com-时时彩机选方法| www.621811.com-竞彩之家怎么样| www.713230.com-百事彩-| www.809269.com-中彩票头奖概率| www.888698.cc-内蒙时时彩奖金设置| www.cai747.cc-快三计划网页| www.qp23.cc-广西7乐彩-| www.51fp.com-e彩堂官方彩| www.1975.club-银川仟彩规则| www.307908.com-福利彩票店几点开门| www.560208.com-买数字彩票-| www.9393.me-彩票中奖101亿| www.773952.com-美国博彩业-| www.ge57.com-韩国彩券开奖官网| www.t80.net-福彩正版3d藏机图| www.80pd.com-梦见朋友彩票中大奖| www.7269.in-彩虹六号银行原型| www.47768.com-1183彩图区-| www.99325.cc-网易彩票资讯手机版| www.350582.com-手机彩膜正面怎么贴| www.535358.com-彩票交易系统瘫痪| 500彩票网www.61655c.com| www.234024.com-快三复式怎么看中奖| www.8049.cc-云南时时采彩走势图| www.039220.com-够彩网-| www.661971.com-竞彩足球截止时间| www.976834.com-烟台彩礼-| www.e27.net-唯彩会-| www.484338.com-伯乐彩彩票平台| www.626881.com-彩票中五百万能中吗| www.708277.com-彩票争霸ll平台| www.771331.com-grt彩票-| www.836108.com-顺丰彩-| www.906521.com-中国体育彩票头像| 126彩票网www.126ll.com| www.hn21.com-福彩6十1-| www.378166.com-彩虹10首飞| www.43835.com-红彩网app卖b的| www.242.online-时时彩一星选号技巧| www.7494.cn-什邡体彩店南城格调| www.28263.cc-福建彩票大奖| www.62261.com-大赢家彩票8516| www.210048.com-大发快三代理邀请码| www.564196.com-加盟机器人福利彩票| www.085993.com-下载福彩三第| www.132113.com-订婚彩礼-| www.234405.com-快乐彩玩法-| www.356166.com-盛大彩票可靠吗| www.470137.com-外国足彩购买| www.575719.com-下载旧版本九九彩票| www.690275.com-足彩14场走势图| www.800400.com-腾讯三分彩全天计划| www.599985.com-彩票网址导航| www.689072.com-双色球专业玩彩微博| www.771052.com-彩虹六号壁纸| www.833322.com-时时彩专业版破解版| www.889765.com-体彩三天计划独胆王| www.949312.com-快三彩票怎么下载| www.990005.com-彩漂和漂白水区别| www.nx5.cc-快三提前开奖软件| www.nn03.com-吉林快三推荐预测| www.zt49.cc-时彩怎么容易赚钱| www.cb62.com-天天彩票的网址| www.350859.com-彩票必中符图片| www.85876.com-彩凃钢板-| www.ld5.com-江苏e球彩中奖规则| www.th9.com-青海快三走势图软件| www.k31.cc-一分快三有什么规律| www.96rv.com-铜雀台彩票网址| www.5404.vip-体育彩票复式价格| www.22661.cc-我一朋友破解私彩| www.995754.com-皇冠足球竞彩app| www.373135.com-下彩网客户端2.1| www.971484.com-彩票最新开奖号| www.iw05.com-51中彩彩票-| www.38eh.com-七星彩2237图规| www.lu64.com-网上快三是假的吗| www.045151.com-绵阳福彩网点申请| www.93yf.com-希腊三分彩-|