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.87893.cc-3分彩是合法的吗| www.42008.com-安卓版玩彩票| www.969647.com-精彩音乐汇2019| www.jb5.com-彩票平台绑卡送彩金| www.sp20.com-彩之家邀请码是多少| www.62213.cc-稳定老娱乐购彩平台| www.031689.com-排三杀码定胆彩宝贝| www.121779.com-西安福彩-| www.230407.com-湖北省福利彩票快3| www.663602.com-今晚七乐彩开奖吗| www.755726.com-江苏快三违法吗| www.848831.com-足球直播唯彩| www.920622.com-上海快三跨度表| www.982147.com-双色球彩妹独栏唯彩| www.20808.com-新型彩票诈骗| www.357162.com-好看的彩铅情景画| www.318172.com-如何看快三走势图| www.553159.com-今日福彩字谜定位三| www.638400.com-怎样申请体育彩票站| www.720742.com-竞彩19046期| www.226907.com-江西福彩快3开奖| www.005936.com-河内五彩计划3胆| www.77xy.cc-竞彩足球赌博| www.501022.com-易彩云邀请码| www.717962.com-网上世界杯彩票| www.854490.com-快三精准算一号| www.937389.com-3d全图彩吧第一版| www.996141.com-黑龙江体育彩票中心| www.dx50.com-快三大小押注倍数| www.xt34.com-彩6app苹果-| www.29bk.com-江西体彩手机在线| www.2572.pw-聊天彩票投资| www.287870.com-华夏彩app下载| www.051771.com-发彩网改网址了吗| www.89of.com-沈阳彩票站合作| www.083282.com-彩票电子报纸| www.217018.com-网上玩快三犯法吗| www.481989.com-大乐透彩票兑换期限| www.267200.com-陆慧明足彩任九新浪| www.381829.com-世彩堂靠谱吗| www.499646.com-鼎丰彩票彩种| www.567476.com-体彩刮刮乐开奖结果| www.633559.com-福彩7星彩-| www.699273.com-天天彩选3开奖号码| www.031342.com-聚丰彩票的骗局| www.1274.vip-查询七乐彩开奖信息| www.7091.biz-北京市彩票咨询中心| www.28231.cc-富彩网彩票app| www.68625.com-新加坡toto彩票| www.29vz.com-昨天福彩开奖情况| www.44343.cc-体彩82多少钱| www.017107.com-福利彩票店几点关门| www.419007.com-彩票网赚平台靠谱吗| www.530916.com-时时彩本金投注比例| www.604897.com-598彩票网官网| www.675592.com-彩票开奖查询23期| www.754055.com-今天彩票买什么号好| www.855527.com-福彩3d浪淘沙| www.5132.cn-彩票截止到几点| www.25185.com-少儿美术彩铅课| www.m87.me-中彩官方邀请码| www.885780.com-利赢国际彩票代理| 大玩家彩票www.162090.com| www.956848.com-金利彩票是怎么回事| www.184488.com-湖北快三开奖结果1| www.803967.com-哪个网站买体彩| www.885135.com-神州彩票官网| www.955275.com-500万彩票开挂| 福彩www.16878q.com| www.gq44.com-彩色包装公司| www.wk25.com-中彩娱乐登录| www.726871.com-数字彩彩票软件| www.843515.com-福彩会不会改制| www.929962.com-快三末班车-| www.998471.com-北京彩票自助终端机| www.mn80.com-白菜网彩金-| www.6vp.cc-533彩票下载安装| www.93gh.com-彩色的图片大全| www.696666.com-彩世界走势计划软件| www.51517.cc-上海快三三同号预选| www.88926.com-佰盈彩票-| www.977706.com-彩票顶呱刮怎么注册| www.318429.com-信彩彩票官网| www.7314.biz-彩虹无人机战绩| www.330318.com-彩票智能追号软件| www.054782.com-福彩6十生肖走势图| www.92218.com-体彩比福彩好中奖| www.062905.com-竞彩258官方网站| www.133277.com-会理拆除彩钢棚文件| www.177694.com-湖北快三多久开一次| www.261858.com-一品堂彩票安全吗| www.345214.com-天天彩票浙江| www.436813.com-湖南体彩网点| www.529004.com-小六壬测彩票的号码| www.588363.com-球彩sam-| www.670211.com-风采还是风彩| www.433559.com-彩民周刊官方下载| www.311380.com-彩48-| www.hq56.com-微彩网是真的吗| www.74uo.com-福彩专家群-| www.661560.com-足彩8串1巨奖| www.560420.com-足彩滚球大小球技巧| www.b78.cn-福彩有缘-| www.55mc.com-pc蛋蛋彩票app| www.0905.vip-彩服丹冠似凤凰| www.832499.com-下载七彩视频| www.900084.com-51彩票的网址| www.965426.com-福利彩票北京pk拾| 500彩票www.50052r.com| www.13579.cc-雪缘园足彩-| www.59103.com-nba篮彩分析预测| www.000891.com-时时彩作弊方法| 全民汇彩票www.52303y.com| www.610215.com-手机能买彩票快3么| www.1173.press-五分快三是什么意思| www.20975.com-佰万彩票app下载| www.ig7.com-中国体育彩票下载| www.237422.com-网易竞彩是不是骗局| www.190127.com-上海快三开将结果| www.pw44.com-金沙博彩骗局解密| www.w74.club-走势图快三福建省| www.42md.com-做梦刮彩票中大奖| www.845608.com-台湾有几种彩票| www.907105.com-体彩7位数走势图| www.959754.com-301彩票-| 盛大彩票www.ct6675.com| www.aa25.com-app端彩祥云下载| www.sa80.com-快三跨度是啥意思| www.960506.cc-泰安三亿彩票中奖| 彩之堂www.11czt.com| www.zw6.com-588彩票网站| www.tk27.com-河南福彩官网| 彩之家www.06czj.com| www.co26.com-快三彩票能赚钱吗| www.807606.com-彩票有收藏价值吗| www.cp1.me-贵州中一等奖彩票| www.q92.net-河北快三规律| www.cp2206.com-福彩快三技巧方法| www.pg64.com-中华彩票网登录网址| www.430721.com-丰彩保温隔音板| www.568961.com-福彩快乐彩开奖昨天| www.650225.com-博彩打头的成语| www.709670.com-网上彩票骗局| www.768050.com-最新足彩十四场比分| www.885398.com-大乐透购彩模拟器| www.977716.com-世界杯彩票怎么买| 13e彩票www.692092.com| www.fq68.com-今日竞彩比分| www.223684.com-中国永利快三网| www.350307.com-印度乐透彩开奖记录| www.525149.com-皇家科技时时彩| www.23py.com-乐彩客下载苹果| www.96ns.com-福彩验票吗-| www.2722.cn-旺彩双色球是真的吗| www.986330.com-中国彩吧助手走势| www.81191.cc-福彩20选5规则| www.v13.me-足彩怎么买外围赛| www.160.hk-彩虹别名-| www.24660.com-儿童彩铅画教程| www.158050.com-足彩19047期| www.83gs.com-福色球彩票开奖结果| www.603321.com-彩16官方免费下载| www.534870.com-下载拍拍彩票| www.32gt.com-中国彩票都是内定|