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天

知道了
亚洲28 www.78858.com-新彩网。-| www.948085.com-福利彩票投注站加盟| www.9241.biz-彩典宝库苹果版| www.447399.com-众彩网可信吗| www.889013.com-彩票帮投单兼职| www.997589.com-传奇彩票-| www.50ep.com-澳客彩票网专家杀号| www.017953.com-彩投彩票app| www.530898.com-彩票玩法大全| www.621016.com-红旗彩票用户登录| www.703338.com-正版福利彩票| www.785085.com-小米福彩-| www.860771.com-好彩双爆珠香烟| www.106722.com-七彩娱乐注册网址| www.221612.com-网络彩票有赢钱的吗| www.315503.com-一起博彩-| www.415472.com-足球竞猜体彩| www.128975.com-1快可提现的彩票| www.02aj.com-关于彩虹的句子| www.437669.com-痴迷彩票人的故事| www.587949.com-福彩3d三星缩水| www.88357.cc-玩彩票需要什么心理| www.055172.com-开黑彩是什么罪名| www.151133.com-福彩三d真实谎言迷| www.66ct.cc-彩票瘾怎么戒掉| www.1242.vip-七星彩每次中奖金额| www.127767.com-金利彩票下载安装| www.316678.com-手机新浪爱彩合法| www.386336.com-3d开奖彩吧助手| www.500840.com-色彩相机的原理| www.238808.com-陌陌上的彩票托| www.605106.com-足彩中奖彩票真图| www.158734.com-黑龙江彩票大奖| www.10nw.com-彩票骗局视频| www.755726.com-江苏快三违法吗| www.872251.com-红旗彩票菜种| www.118678.com-广州福利彩票中心| www.379632.com-我在洪荒漫彩票| www.536009.com-五位数字的彩票| www.611560.com-长春彩溢会馆| www.690442.com-重庆快乐十分彩开奖| www.005558.com-彩9彩票下载安装| www.130492.com-湖南彩控网快乐十分| www.264110.com-北京5分彩走势图| www.353659.com-程阳彩票是干什么的| www.1904.xyz-极速快三实时计划| www.946681.com-快三害人吗-| 大玩家彩票www.9478s.com| www.57354.com-官方指定购彩平台| www.111366.com-乐猫彩票app下载| www.894667.com-彩票图怎么看| www.962777.com-乐彩网摘文集| 500万彩票www.967333.com| www.374322.com-香港5分彩大小| www.906524.com-彩票号码几位数| www.964403.com-500竞彩足球比分| 日彩网www.rcw8844.com| www.974.mobi-1分彩和值单双| www.257656.com-132彩票-| www.351112.com-南方双彩网走图首尔| www.484879.com-北京新彩量科技如何| www.032116.com-如何开彩票店| www.256029.com-我要中彩票网站下载| www.825965.com-七星彩老鼠精长局图| www.943522.com-w彩票平台登录| 火星彩票www.hx6622.com| www.89ek.com-焦点篮球竞彩计划| www.7063.org-843彩票-| www.656751.com-福彩3d彩吧首页| www.8282.biz-幸运彩一52xy| www.466859.com-新加坡金都快三查询| www.595506.com-虎扑篮彩神棍区| www.688521.com-湖北福彩下载安装| www.86876.com-七星彩怎么中奖法则| www.818208.com-足彩当前期对阵预测| www.18515.com-香港彩-| www.73648.com-彩77是违法的吗| www.in92.com-齐鲁七乐彩预测| www.am93.cc-陕西快三开奖| www.659304.com-北京福彩网论坛| www.786751.com-用正规彩票pk黑彩| www.471888.cc-香港官网彩票| www.611131.com-3d福彩速查表| www.683153.com-所有彩票平台| www.754515.com-红彩会官网app| www.310540.com-山东体彩自由讨论区| www.387005.com-足彩总进球数玩法| www.274682.com-分分彩互刷方案| www.400925.com-七星彩五六位和尾| www.557939.com-海南四加一彩票| www.666108.cc-航天彩虹即时股价| www.489981.com-七乐彩开奖公告今天| www.593857.com-七彩彩票查询| www.014022.com-七星彩61-| www.256713.com-安徽快三预则一定牛| www.587619.com-c8∵cn万彩吧| www.01338.com-彩云天气预报下载| www.7671.xyz-今天七乐彩摇奖号码| www.38119.cc-3d跨度走势大彩网| www.85111.com-七星彩前四位和值| www.131628.com-河南体彩网排三预测| www.226044.com-浙江省快乐彩走势图| www.307703.com-派彩金额是什么意思| www.378719.com-周口体彩中心在哪| www.7408.cc-福彩资金包括| www.289957.com-彩宝网排列三试机号| www.202836.com-北京快三数字走势图| www.981281.com-1990彩票平台| www.23994.com-体彩管理中心| www.37892.cc-欢喜国际彩票| www.948687.com-澳门基金六福彩| www.wv03.com-7星彩走势图带连线| www.767468.com-体彩5d中奖-| www.87vf.com-华为荣耀6x彩膜| www.366928.com-体育彩票店面照片| www.751449.com-淘彩app正规吗| www.948178.com-福利彩票2千亿| www.cp7466.com-湖北快三开奖及走势| www.67pz.com-足彩销售额-| www.99353.com-结婚什么时候谈彩礼| www.161102.com-彩票天天乐是否正规| www.295735.com-辽宁快三走势图查询| www.367878.com-体彩6?1玩法| www.522383.com-5亿彩票是骗人吗| www.609249.com-海南七星彩解梦号码| www.10tc.com-中彩娱乐网一一登录| www.1416.me-c彩票精准计划群| www.585108.com-彩票都包括什么| www.051120.com-上海快三和值跨度表| www.rx4.cc-河北快三组合走势图| www.xj60.cc-福彩天地报最新版| www.612295.com-天下有我福彩3d| www.698155.com-彩民堂软件真的吗| www.350131.com-福彩3+d开奖结果| www.zo41.com-七彩网彩票官网| www.40in.cc-体育彩票过年什么停| www.3844.in-足彩19039凯利| www.959920.com-时时彩长龙有多长| www.174018.com-大发快三官网| www.27963.cc-168彩票注册网| www.549.net-乐享彩票app下载| www.35852.com-头条彩票是怎么回事| www.770210.com-十十彩票怎么玩法| www.846536.com-福彩3d账号注册| www.948116.com-福利彩票的意义| www.990129.com-福彩藏机图谜总汇| www.wk6.cc-澳洲5分彩开奖结果| www.se10.com-腾讯时时彩开历史| www.0mt.com-流文溢彩作文| www.659135.com-彩票开奖19036| www.950394.com-乐彩客苹果版| www.322711.com-网易买彩票-| www.385028.com-安徽福彩快三官网| www.510.mobi-福彩360全国开奖| www.6915.biz-现在怎么买彩票| www.23382.cc-彩票资讯中国足球网| www.69095.com-美女买彩票照片| www.702122.com-竞彩app源码| www.009666.com-手机彩膜可以用多久| www.42gv.com-唯彩看球官方版| www.078035.com-中福彩票可靠吗| www.165012.com-顶尖彩票app| www.455424.com-资料大全4s彩票| www.7448.pw-彩票刮刮乐软件游戏|