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.583855.com-六个彩开奖网址大全| www.441781.com-竞彩限售99倍投| www.626948.com-nba体彩购买技巧| www.278782.com-优信购彩大发快三| www.946811.com-彩钢围挡合肥| www.218270.com-神算子彩票3d迷图| www.308646.com-大乐购彩票怎么玩| www.416940.com-福彩双色球是几选几| www.04eu.com-简单校园风景彩铅画| www.54ga.com-时时彩稳赚技巧| www.494054.com-一定牛胜负彩推荐| www.711986.com-结婚男方给女方彩礼| www.961323.com-七乐彩奖金和七星彩| www.z39.net-排列三南方双彩| www.8561.loan-彩票两元网大乐透| www.75px.com-足彩十四场及时比分| www.966739.com-宝马彩票可靠吗| www.465.cc-七星彩纶坛特区| www.0102.wang-国家承认的彩票| www.957.in-七星彩赔法-| www.608716.com-彩票带赚包赔| www.pa25.com-即时開彩-| www.394397.com-最新彩虹世界安卓版| www.285486.com-湖北快三现场开奖| www.sv82.com-彩票单双与九宫图| 盛彩网www.41518h.com| www.218105.com-众盈娱乐五分快三| www.310206.com-我要看体彩和福彩| www.92455.com-网上立彩是不是骗局| www.071733.com-竞彩国家亏-| www.35691.cc-福彩查询系统| www.96846.com-足球竞猜新浪爱彩| www.333690.com-给员工发彩票| www.6318.bid-三彩服饰批发| www.3879.biz-东莞市体育彩票地址| www.29163.cc-搜狗彩票投诉电话| www.816.space-宁海体彩app| 天天中www.0ttz.com| www.386756.com-地球人彩票安卓版| www.597248.com-乐亿彩票信息平台| www.877666.com-私彩网站怎么盈利| www.963196.com-彩票人工神圣计划| 彩吧www.580296.com| www.ml02.com-北京快三怎么玩| www.327663.com-新天天彩票骗局| www.446889.com-足彩八串一中奖规则| www.566163.com-乐彩彩票二十分| www.cai5502.com内蒙古快三360| www.ns71.com-彩票不用票怎么兑奖| www.258075.com-彩票大app大全| www.008833.cc-彩票有没有防伪标志| www.519715.com-256彩票官方| www.024218.com-五星彩票下载安装| www.5554.biz-南京雪中彩影怎么样| www.595988.com-时时彩购买技巧| www.715935.com-彩票代购网站妙招| www.63359.cc-19052足彩推荐| www.56617.cc-石家庄体育彩票中心| www.92.cm-新彩吧彩票下载安装| www.455024.com-彩吧三d谜图| www.556973.com-看彩票app-| www.644510.com-华亿彩票官方网| www.400178.com-星际传奇游戏厅彩票| www.293620.com-可靠的彩票平台制作| www.384885.com-彩票大王-| www.490821.com-宏达彩票怎么注册| www.592178.com-最好用的彩票软件| www.0li.cc-下载福利七乐彩票| www.23596.cc-彩神1平台下载| www.81758.cc-博彩快三-| www.107053.com-澳洲五分彩开奖号码| www.16388.com-沈阳市体彩中心地址| www.976028.com-2019年农村彩礼| www.382196.com-创名彩票网址| www.67en.com-重庆福彩快乐十分| www.3650.org-石家庄彩票站转让| www.0282.loan-彩票创意促销方案| www.020903.com-精彩十分彩票玩法| www.342598.com-天彩粮陕食尚怎么样| www.ff57.com-体育彩票十分钟规则| www.715185.com-826彩票下载| www.794851.com-体育彩票如何中奖| www.877101.com-百胜彩票登陆| www.952894.com-体彩开奖大乐透| 好彩www.60123w.com| www.ek58.com-好彩网首页-| www.03sy.cc-乐购彩票是什么平台| www.65cz.com-老谢看彩双色球| www.890746.com-体彩4串4-| www.869108.com-快3彩票有漏洞吗| www.924935.com-也买彩是骗人的么| www.973513.com-儿童彩虹简笔画彩色| 博通彩票www.684050.com| www.683958.com-福彩实体店app| www.907833.com-高频彩票投注平台| www.964999.com-麒麟彩票网骗局揭秘| 博乐彩票www.35918j.com| www.mn37.com-彩68官网28下载| www.798571.com-体彩投注站查询| www.880983.com-广西体彩兑奖在哪| www.958283.com-鸿运快3彩票| 博友彩www.433112.com| www.827133.com-下截珠江彩票app| www.64044.com-竞彩足球跟单软件| www.431005.com-澳门足彩-| www.548163.com-锋彩直播自定义频道| www.9um.com-七星彩两码定位打法| www.268637.com-彩神争霸有效邀请码| www.791746.com-北京时时彩平台| www.355700.com-竞彩中奖交税| www.120653.com-体育彩票竞彩提成| www.688704.com-好彩一怎么玩| www.817986.com-陆慧明竞彩预测| www.911775.com-时时彩神计划| 68彩票www.68682h.com| www.ki86.com-彩票一一开奖查询| www.5cl.com-台湾五分彩预测| www.486622.com-陕西省福彩兑奖地址| www.305766.com-易彩是真的吗| www.430996.com-秒速赛车彩票网站| www.3672.biz-苹果彩票网线路入| www.721979.com-老快三开奖经果| www.09gx.com-57彩票网站-| www.0762.pro-七星彩解梦码册| www.02323.cc-鴻鼎彩票-| www.226229.com-凤凰彩票导师微信号| www.316765.com-彩票兑奖查询| www.jd72.com-竞彩app怎么拉人| www.08ox.com-彩神计划软安卓版| www.9187.vip-重庆五分彩走势图| www.331524.com-天天中奖彩票app| www.639213.com-申请开彩票店流程| www.724212.com-彩票史十大冒领事件| www.806569.com-幸运飞艇彩票规律| www.876703.com-香港正版蓝彩| www.942616.com-分分时时彩软件下载| 55世纪www.57pk.cc| www.398163.com-原生彩票app源码| www.510178.com-竟彩足球下载与安装| www.580866.com-kc8开彩吧下载| www.638612.com-上海体育彩票总店| www.723295.com-黑红方彩票机软件| www.788219.com-500彩票凯利指数| www.846235.com-福彩刮刮乐假票案| www.909201.com-福彩3d高级资料| www.968239.cc-彩票排列5二等| 福彩www.26878z.com| www.239811.com-关于王者彩票被骗| www.349199.com-网上购彩用什么软件| www.576428.com-中彩吧登陆-| www.715822.com-网易颖彩双色球预测| www.302143.com-河南河南快三| www.262651.com-天津福彩快三开奖| www.528536.com-今晚彩票预测号码| www.p27.cc-黑彩为什么总是输钱| www.18612.cc-竞彩足球合买骗局| www.lr14.com-体彩中奖规则及奖金| www.ab17.com-快三追号亏千万| www.23936.cc-启航国际网赌彩票| www.029486.com-山东云彩宝彩票下载| www.569810.com-彩票中奖有预感吗| www.867908.com-南海七星彩坛论坛| www.948719.com-幸运快三规律| 500万彩票www.39500c.com|