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.1237.site-七乐彩票机选号| www.77172.com-柬埔寨博彩-| www.798071.com-广东11选五彩乐乐| www.937840.com-彩票开奖视频| www.235793.com-彩票彩票开奖大厅| www.127550.com-彩虹六号围攻多少钱| www.53696.cc-体彩店怎么申请| www.99253.cc-手机上怎么买彩票了| www.062973.com-彩票到哪里加盟| www.100937.com-山东福彩中心地址| www.404512.com-彩库宝曲最新开奖| www.530367.com-中国竟彩足球胜平负| www.103006.com-中了彩票大奖借钱| www.268696.com-湖南快三查询结果| www.387749.com-人民网彩票-| www.538693.com-安卓时时彩趋势软件| www.646456.com-足彩稳赢技巧| www.732234.com-彩礼退还比例| www.867826.com-七星彩还未开的号码| www.983608.com-第九彩票是什么| www.xl6.com-延吉七乐彩快三| www.511.club-星彩无惨邪恶帝国| www.625008.com-福利彩票开始时间| www.712885.com-流行彩铃-| www.810218.com-足球竞彩腰折怎么算| www.884934.com-彩神大发快三下载| www.953549.com-网易足彩单场推荐| 500彩票www.50051t.com| www.gs96.com-大掌柜彩票app| www.zd84.com-速8彩票靠谱吗| www.23dz.com-韩国彩票扣税| www.7640.cc-体育彩票的标| www.31026.com-彩票中奖ps-| www.28189.com-高频彩app排行榜| www.82877.cc-大奖彩票机子能兑| www.19951.com-吉林快三和数表| www.999079.com-v8汇彩网-| www.1883.org-福彩机器人在哪里买| www.8478.cn-博彩王bcwzus| www.2590.vip-安徽电信彩铃| www.3gb.com-小伙彩票过期| www.017874.com-刚力彩芽av-| www.46wh.com-乐彩双色球字迷专区| www.76656.cc-k彩票下载-| www.297383.com-上海快三二码遗漏表| www.231448.com-全能中彩彩票下载| www.e65.space-大中华彩票官方网站| www.66pm.cc-六合同彩开奖结果| www.586905.com-足球彩票一般多少钱| www.699230.com-爱彩乐可以网络买吗| www.791678.com-下载福彩3d预测| www.901690.com-腾讯分分彩后四| www.968689.com-香港买的彩金值钱吗| 500彩票www.652631.com| www.qp52.cc-中国福彩在线技巧| www.96594.com-彩票手机做号软件| www.062296.com-智能追号彩票平台| www.295289.com-彩票送体验金| www.822420.com-彩票创始人-| www.990586.com-快三彩票是真的| www.yg56.com-体育彩票店转让| www.24qe.com-幸运5分彩计划软件| www.424922.com-九彩坪-| www.93213.com-京彩生活app下载| www.110290.com-七星彩粤海局王图纸| www.200453.com-河南彩快3开奖结果| www.121859.com-彩票开奖网易彩粟| www.948659.com-买彩票用什么app| www.d47.cc-七星彩海南南国网| www.1382.xyz-掌聊彩票下载| www.572834.com-灯彩工艺-| www.688998.cc-上海体彩网官网下载| www.18127.cc-体育彩票怎么拨号| www.67mc.com-熊猫彩彩-| www.356110.com-好彩vip彩票首页| www.448843.com-太原福利彩票转让| www.219422.com-中国福建体育彩票网| www.30223.com-体彩排三预测总汇| www.by53.com-福建福彩-| www.tj19.com-快3彩票怎么样| www.031625.com-彩票开奖漏洞破解| www.128091.com-快三开奖走势图软件| www.917484.com-必赢彩票-| www.981647.com-哪些是官方彩| www.no4.cc-河南快三跑马一定牛| www.0315.love-体彩店距离限制| www.366003.com-五彩斑斓的黑下一句| www.6024.org-淄博市福彩中心电话| www.136228.com-福彩广西快3走势图| www.258441.com-足彩推荐-| www.273851.com-手机如何买彩票| www.678933.cc-旺旺彩票腾讯| www.880456.cc-网络彩票代理赚钱吗| www.jh63.com-彩票注册送38彩金| www.581782.com-凤凰彩票快三助手| www.657655.com-女子彩票中51亿| www.749978.com-全中彩票正规吗| www.822373.com-城彩娱乐平台| www.926882.cc-趣彩彩票-| www.981746.com-大佬彩票app| www.cp184.com-11选5在线购彩| www.640368.com-麦久彩票网东方红| www.768707.com-常州彩票店转让| www.0213.cc-彩吧彩报银海版| www.719658.com-马来分分彩开奖查询| www.842456.com-福彩基金是什么| www.948016.com-四川体彩中心官网| 彩民网www.79520d.com| www.501012.com-退伍迷彩倒计时| www.600514.com-附近双色球彩票站点| www.688590.com-北京体彩电话投注| www.782557.com-搜索彩票重奖查询| www.884828.com-彩票走势图用什么擦| www.472886.com-2018福彩3d-| www.713608.com-全民赢彩票提现不了| www.792040.com-福彩中心胡雅清| www.860577.com-⑥和彩-| www.941281.com-中国体育彩票有哪些| 澳客彩票www.109ak.com| www.116138.com-彩库宝典1.3.0| www.oj99.com-湖南福彩中心新地址| www.663693.com-足彩世界杯比分倍率| www.01943.com-旺彩网彩预测大乐透| www.059962.com-全民彩票网网址| www.116616.com-南方福彩app下载| www.5555.biz-彩影免费版绿色| www.24734.com-出售送彩金彩票平台| www.081063.com-彩票老师一对一| www.455299.cc-区块链彩票游戏| www.612614.com-马来西亚分分彩| www.755384.com-豪门旺彩票实战讲座| www.fk57.com-浙江快乐彩开奖结果| www.2jq.cc-你们身边有中彩票吗| www.57526.cc-江西快三最大遗漏值| www.5676.top-挂彩什么意思| www.0111.org-抽彩票数字球的游戏| www.vz0.com-体彩排列三彩经网| www.ph91.com-下载海南快三| www.t53.top-i8网上黑彩票| www.43zb.com-uc彩票是真的吗| www.li52.cc-306官方彩票下载| www.313662.com-江西快三开奘结果| www.450303.com-千禧彩票9955| www.710822.com-刷彩赚钱是真的吗| www.874289.com-彩票站一注提成多少| www.gn78.com-河南快三未出的号码| www.19xa.com-前二复式分分彩软件| www.2777.win-网彩计划骗局揭秘| www.137620.com-彩票平台对刷赚流水| www.221599.com-黑客软件破解彩票| www.289688.com-977cc官网彩票| www.358970.com-买体彩用什么app| www.td43.com-赢彩彩票网站可靠吗| www.06wk.com-用彩铅画的凤九| www.061213.com-李维伟亿德彩票| www.352165.com-福利彩票3d的资料| www.9680.cm-01彩票是什么软件| www.82qk.com-七星彩开奖今晚结果| www.gl51.com-温县彩礼多少| www.9129.top-七乐彩开奖历史数据| www.603362.com-2002世界杯彩票| www.635141.com-七彩假期招聘| www.727646.com-杏彩app下载链接| www.812893.com-彩贴印制机-|