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.222525.cc-盐城彩票中一亿| www.g91.club-彩宝网大乐透| www.4566.pw-福彩35期中奖号码| www.55163.com-哪里可以合买彩票| www.565208.com-彩票频道万彩吧| www.697975.com-凤凰彩票导航网址| www.786823.com-极速秒秒彩平台网址| www.4011.cn-三度白菜论精彩打造| www.51379.cc-彩世界微信娱乐系统| www.039967.com-怎么下载吉林快三| www.557328.com-儿童简单水彩创意画| www.623411.com-武威市福彩中心| www.7571.cn-东莞东方亮彩地址| www.483755.com-福彩3d一字谜| www.342818.com-足彩让球详解| www.530111.cc-二八彩票官网| www.601783.com-买大乐透彩票2元| www.674154.com-做彩票业绩怎么抓| www.052792.com-进球彩开奖结果| www.106650.com-世界杯买足彩赔死了| www.182134.com-c038彩票官方版| www.14jn.com-拉彩金麻将安卓版| www.03073.com-沉迷彩票倾家荡产| www.185862.com-时时彩怎么玩才赚钱| www.2350.cn-福彩快乐5分| www.757068.com-大乐彩是合法的吗| www.852147.com-唯彩看球官网网页| www.947110.com-高频彩票的原理| www.998281.com-福彩实业有限公司| www.bx49.cc-中国福利彩票怎么查| www.53425.com-彩虹儿童画图片| www.292679.com-3d新彩网吧-| www.079.vip-机选七星彩能中奖吗| www.7982.vip-线上博彩合法化国家| www.997235.com-网络彩票算诈骗吗| www.cz26.com-私人招足彩分析师| www.xb86.com-全民中彩app下载| www.235815.com-9亿彩票-| www.273933.com-福彩快12玩法介绍| www.9372.in-福利彩票官员落网| www.767826.com-浙江体彩官网| www.60009.cc-中国福利彩票二等奖| www.506011.com-彩票dna-| www.zn63.com-彩票任务代打团队| www.072920.com-非凡丹麦快乐彩计划| www.11488.com-彩票网站系统出租| www.176266.com-极速快三预测网址| www.356814.com-中彩网5o0彩3d| www.583580.com-彩票有多少个号| www.106092.com-福建快三走势图下载| www.221255.com-彩票助赢-| www.035022.com-彩礼江西-| www.007348.com-体彩出奖号今天| www.976223.com-彩礼和嫁妆的区别| www.cp6138.com-福彩app-| www.2608.vip-c58彩票-| www.69397.com-彩博士全能王| www.703897.com-长春福彩中心导航| www.4068.vip-彩票站一张挣多少钱| www.cai1799.com快3彩票是真的假的| www.443301.com-彩通网3d-| www.769727.com-好运彩票平台怎么样| www.868125.com-周三开奖彩票| www.920908.com-彩神x的下载链接| www.976084.com-菏泽彩礼顺口溜| 吉利彩票www.80065m.com| www.150813.com-彩票818app-| www.42qx.com-彩钢棚做法详细图解| www.822575.com-网络彩票代理平台| www.895915.com-彩票试机号-| www.956601.com-查彩票用哪个软件好| 彩乐乐www.3005.am| www.bo56.com-彩票大厅-| www.5398.cm-4个数的彩票| www.741010.com-28c彩票网-| www.890240.com-福彩3d字谜大全| www.dc93.com-人人竞彩-| www.2177.cn-彩乐彩票下载安装| www.100993.com-福彩独胆图谜| www.744339.com-苹果版购彩app| www.48989.com-全民赢彩票怎么样| www.793655.com-网上彩票赌博害人| www.882444.com-一分彩怎么玩| www.947857.com-台湾彩票开奖结果| www.978915.com-河南快三怎么追号| www.gz88.com-幸运彩票正规吗| www.tv51.com-网上合买彩票软件| www.368738.com-福利彩票历史对比器| www.981224.com-竞彩足球任九场| www.el27.com-好运快三-| www.39kl.com-中福在线拉彩规则| www.5011.in-彩神彩票怎么看走势| www.468591.com-京东彩票推荐| www.8363.top-霞光溢彩的含义| www.vd43.com-pp彩票官方网站| www.40ku.com-看看福彩3d专业版| www.677096.com-包装纸箱彩色设计| www.165819.com-买快三彩票能发财吗| www.5659.cn-彩108彩票下载| www.584432.com-中3彩票平台| www.34365.com-大发快三模拟器| www.kn.com-时时彩选号助手| www.9ql.com-体彩福彩哪个卖的好| www.8170.cc-贵州快三怎么预测| www.52379.cc-天猫彩票网站| www.432335.com-13彩做任务靠谱吗| www.28961.cc-彩票精准分析器| www.73873.cc-世界杯那里买彩票| www.377106.com-97彩票用户注册| www.359776.com-凤凰彩票平台怎么样| www.082097.com-老彩民网址-| www.212420.com-全球最强私彩| www.t95.net-2018年开马彩| 大赢家彩票平台www.507281.com| 凤彩网www.33gpc.com| www.676995.com-福彩刮刮乐会过期吗| www.895691.com-广东福彩有快三吗| www.999378.com-顶呱刮彩票下载安装| www.qw07.com-彩票外挂软件| www.754931.com-中国福利彩票怎么看| www.895028.com-新世界时时彩助手| www.kw75.com-澳门彩票公司首页| www.408605.com-节假日卖彩票吗| www.1127.com-赢彩王计划软件下载| www.137622.com-浙江体彩61| www.657546.com-福彩复式专家| www.868427.com-703彩票-| www.595090.com-京东快彩28-| www.751922.com-中国体彩网网| www.926381.com-江西时彩开奖记录| 福彩网www.60007r.com| www.n42.top-中彩网首页福彩| www.116008.com-中国彩吧体彩论坛| www.365102.cc-风之彩团队-| www.456051.com-4scc彩票网站| www.616423.com-吉林省体彩管理中心| www.qd31.com-八亿彩软件下载| www.661083.com-博彩团队计划| www.877511.com-一分彩票app下载| www.945525.com-kc一分彩-| 大赢家彩票平台www.158267.com| www.uw15.com-uu快三是正规的吗| www.333843.com-中国体育彩票简介| www.430699.com-永利彩票网址| www.592609.com-七星彩票手机苹果| www.700807.com-福彩专刊-| www.981331.com-中国全民快三下载| www.de15.com-广西快三走势图表| www.xv59.com-被澳发彩票黑钱| www.12ez.com-陕西福彩3d开奖| www.46326.com-卖福彩有任务吗| www.545689.com-七星彩开奖查询结果| www.086048.com-八马彩票聊天室| www.220288.com-北京快三路线图| www.676206.com-体彩七位数哪天开奖| www.639145.com-余姚体彩哪里申请| www.616.name-传奇彩票登录| www.80ir.com-汇辰彩票28558| www.703288.com-彩票解码软件下载| www.127904.com-周杰伦彩虹歌词| www.0512.red-国正彩票-| www.668.bid-24小时极速时时彩| www.130634.com-上官燕七星彩预测号| www.410289.com-七彩球开奖查询|