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天

知道了
58福彩 www.448006.com-好123彩票网彩网| www.qw81.com-时时彩投资计划| www.20906.com-彩票争霸ll-| www.956226.com-彩票能不能赢| www.049191.com-体彩排三开机号今天| www.810380.com-上海体彩发行中心| www.480320.com-怎么当91竞彩大神| www.94jv.com-博亚彩票手机版| www.w10.cc-湖北体彩网络购买| www.517312.com-金码日历七星彩| www.06oh.com-可以购彩票软件下载| www.006927.com-官方彩的1分快3| www.062528.com-破解彩票漏洞犯法吗| www.515689.com-领航团队时时彩计划| www.029072.com-网络彩票代玩兼职| www.24go.com-558彩票网平台| www.vd72.com-亿彩彩票官网下载| www.730213.com-新彩吧字谜汇总| www.643771.com-618购彩-| www.106132.com-彩宝彩票下载苹果| www.125.hk-福利彩票站利润| www.1789.cc-高频彩有假吗| www.297983.com-快三中奖图片| www.mt20.cc-e球彩助手官方下载| www.964650.com-七星彩周公解梦数字| www.64089.com-福彩双色球中奖真假| www.890959.com-三态平衡分析彩票网| www.jx06.com-彩吧彩票是什么| www.641442.com-体彩宣传语图案| www.922908.com-福彩3d中心开机号| www.131112.com-环彩网appios| www.151250.com-福彩3d彩报银海| www.00034.com-爱投彩票怎么样提现| www.666177.com-大乐彩怎么回事| www.qn28.com-快三走势图表格下载| www.zh74.com-彩票500官方端口| www.77ap.com-乐彩网字典字谜| www.192653.com-下载体彩十一选五| www.894764.com-彩票图表走势图表| www.362422.com-七星彩头尾合数论坛| www.655599.cc-网易体彩开奖视频| www.063511.com-济南最新体彩店转让| www.301287.com-新浪彩票全国开奖| www.740094.com-搜狐数字彩票网| www.700483.com-变条码彩票-| www.671414.com-福彩三地彩乐园| www.62753.cc-快速查体彩开奖| www.952653.com-竞彩足球胜平负预测| www.306027.com-春天彩票app| www.814722.com-延安福利彩票双色球| www.2cx.cc-掌上彩票网址| www.718972.com-彩虹是怎样形成的| www.743177.com-彩吧三d开机号今天| www.051853.com-9万彩票app-| www.558474.com-彩铅画多肉植| www.cw27.com-佰萬彩票下载| www.358407.com-彩运来app-| www.337282.com-今晚七彩码开奖| www.375176.com-体彩直播开奖视频| www.083350.com-七星彩开奖号码今天| www.67888.cc-福利三分彩开奖记录| www.007009.com-中原风彩最新开奖号| www.770428.com-香港好彩8o234| www.83pw.com-惠彩餐饮设计| www.92473.com-竞彩比分奖金上限| www.156413.com-好彩堂切0232| www.974320.com-中国福彩三d开奖号| www.19722.com-皇冠外围彩票网| www.033831.com-神彩网论坛网站| www.5750.pw-体彩七位数中四位| www.731510.com-d9彩票版平台下载| www.20395.com-全能中彩彩票网| www.121504.com-百合网上男的玩彩票| www.777666.cc-168彩票网166| www.su38.com-彩票中奖内部秘密| www.135862.com-足彩让球胜平负开奖| www.418484.com-彩漂洗涤剂的作用| www.586569.com-游戏送彩金-| www.81594.com-胡佳俊褔彩3d| www.614149.com-马来西亚福彩字画| www.014.in-辉腾彩票鸿彩快三| www.743530.com-中彩网擂台赛电脑版| www.sz78.com-5位数的彩票叫啥| www.87538.com-南方彩票是真的吗| www.874814.com-7k官方彩票平台| www.32066.com-手机怎样买足球竞彩| www.cp8468.com-快三计划手机版| www.265191.com-广西快三计划群| 中彩www.zcwf1.com| www.213834.com-河北快三豹子计划| www.363173.com-发彩网怎么注销账号| www.43261.com-炫彩彩票软件| www.3071.win-江苏快三一分开| www.51753.cc-希望彩票邀请码| www.306731.com-欢迎使用826购彩| www.de93.com-众赢彩票-| www.87ea.com-九州彩票官方网站| www.35536.com-盛世彩票ss555| www.391237.com-海南私彩七星彩玩法| www.099995.com-22彩票官网下载| www.927773.com-生肖彩票资料大全| www.98kn.com-微信群黑彩-| www.097829.com-鑫彩网彩票注册官网| www.vl04.com-私彩快三怎么玩稳赚| www.3060.top-微彩排列五长条| www.27286.com-数学家破解彩票| www.333206.com-彩票买全码稳赚方法| www.493293.com-连连中彩票下载| www.635916.com-彩票打水-| www.07hv.com-上期福利彩票开什么| www.5396.cm-樱花彩铅画教程图片| www.563265.com-彩票网站源码代理| www.946631.com-内蒙福彩时时彩走势| www.070807.com-彩礼钱一般给多少| www.337865.com-呼和浩特福利彩票站| www.518368.com-安徽福彩报纸| www.954415.com-高频彩票开奖网站| www.6547.vip-三分彩官网平台| www.190173.com-河南省快三遗漏| www.407740.com-体彩七星彩兑奖明细| www.350.gg-cp816彩票-| www.067785.com-有想做黑彩代理的吗| www.640089.com-南国七星彩精选论坛| www.cai6822.com快三走势图甘肃形态| www.a17.club-体彩图标尺寸| www.148520.com-广西福彩领导| www.386162.com-港彩60876-| www.926908.com-256时时彩票官网| www.93hp.com-彩票怎么才算违法| www.8371.top-福星七星彩开奖结果| www.372825.com-永城彩票网-| www.883762.com-博友彩首页app| www.pe3.cc-彩6安卓版-| www.00uo.com-彩票缺了一个小角| www.71377.com-不收费彩票qq群| www.226759.com-8号彩票是不是真的| www.773087.com-最准的彩票预测号码| www.939678.cc-爱资料福彩门户惠泽| 彩票5www.542116.com| www.023553.com-今日彩票指南报纸| www.493921.com-686彩票手机| www.890111.cc-焦点蓝彩开奖| www.61of.com-天际彩票官方网址| www.97123.com-彩36下载安装| www.139069.com-盈彩彩票是骗局吗| www.557211.com-3d彩票网走势图| www.661594.com-重庆时时采彩作假| www.936878.com-e乐福app福彩| 爱上彩票www.ascp5.com| www.3465.xyz-财通彩票正规吗| www.12755.cc-澳客彩票是合法的吗| www.71809.com-福利彩票多会儿开奖| www.179261.com-江苏快三挣钱吗| www.309817.com-体育彩票足球胜平负| www.426518.com-竞彩篮球稳赢| www.555695.com-竞彩经验与技巧| www.709456.com-博汇彩票正规吗| www.992136.com-时时彩定位胆规则| www.ao46.com-贵州体彩下载安装| www.wn07.com-内蒙福彩快3一定扌| www.28hb.com-体育彩票安全吗| www.4484.vip-快三基于什么原理| www.12263.cc-浙江快彩走势图表| www.66471.com-澳门搏彩网址大全|