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天

知道了
1分快三 www.396548.com-星期四福彩开奖结果| www.561972.com-彩鸿彩票靠谱吗| www.008084.com-大乐透江苏体彩网| www.uq70.com-乐彩15700-| www.72ak.com-快三开奖走线图| www.103642.com-鸿运彩票官方| www.976818.com-二审改判不退还彩礼| www.f23.com-福利彩票助手手机版| www.651318.com-加拿大基诺彩开奖| www.733899.com-福彩3d几天开一次| www.7264.cc-彩虹5无人机造价| www.gq90.com-广东好彩1开奖结果| www.200453.com-河南彩快3开奖结果| www.6329.xyz-下彩彩票网页版| www.76327.cc-高胜率彩票计划网站| www.179249.com-网上带人买彩票骗局| www.372028.com-彩票讯息时时彩计划| www.780086.com-福彩三d规律学视频| www.694811.com-体彩飞鱼开奖查询| www.090862.com-网易彩票中奖| www.76697.cc-新彩网福利彩票3d| www.1538.vip-尼彩手机在哪买好| www.89986.com-c59专业彩票平台| www.122522.cc-时时彩的qq交流群| www.271878.com-中原彩票l下载| www.414175.com-精彩的精-| www.274783.com-大发快三经验| www.930776.com-网上买彩票的网址| www.2675.in-世界杯彩票停止销售| www.288131.com-官方优彩网-| www.969667.com-体彩三五d-| www.3rc.com-体彩的基础知识| www.3597.cc-南方双彩网今天| www.866408.com-昨日福彩-| www.199591.com-彩票开奖网-| www.590468.com-唯球看彩-| www.695432.com-中国竞彩360首页| www.793030.com-彩票九合法吗| www.900136.com-大无限彩票坑人| www.yl90.cc-大乐购彩票中奖规则| www.303452.com-唯彩会最新版下载| www.404198.com-华众彩票注册| www.006502.com-快彩怎么玩容易中奖| www.yj55.cc-彩38app-| www.269462.com-518彩官网登录| www.455737.com-澳客网彩票√| www.606715.com-世界杯买不了足彩| www.795708.com-彩牛彩票安卓链接| www.280803.com-uu快三单双技巧| www.450450.com-288彩票里的快三| www.874133.com-福彩第二版-| www.981357.com-中国足彩网竞彩足球| www.is16.com-足彩竞彩网开奖结果| www.31xl.com-体彩18058-| www.677508.com-彩钢板临时围挡| www.171017.com-上海快三中奖助手| www.2444.cc-彩83下载苹果版| www.72609.com-吉林省福彩中心秦岭| www.120248.com-久久发彩票pc| www.580348.com-彩票站几点关门| www.769379.com-金博彩票快三| www.922418.com-北京足彩招聘| www.112421.com-时时彩反倍投绝对嫌| www.232388.cc-玩彩票赚钱-| www.350830.com-彩膜代理-| www.345674.com-彩漫福利-| www.0014.online广东这边买生肖彩票| www.8396.vip-福运彩票app下载| www.52631.cc-好彩真假怎么辨别| www.086897.com-福星彩下载-| www.522323.com-250计划时时彩| www.626161.com-盛兴金祥彩票网| www.651422.com-永利国际彩票网站| www.984485.com-财神8彩票网址| www.pz57.com-彩66下载安装| www.38io.com-描写彩虹的唯美句子| www.7468.me-怎么办中国体育彩票| www.18mg.com-首次注册首存送彩金| www.0695.vip-彩票站能转让吗| www.7238.tv-易算彩43-| www.691869.com-彩票双色球机选模拟| www.99kp.cc-天天竟彩app| www.4603.cc-大渡口彩民-| www.268302.com-深圳福彩app| www.358081.com-匕星彩号吗兰多少| www.485931.com-手游彩怎么停售了| www.576804.com-带别人玩彩票犯法吗| www.692999.com-彩米彩票app| www.813840.com-福彩金条-| www.913165.com-好彩客官方网址| www.46rf.com-二元彩票走势图大全| www.0980.vip-粤彩网广东11选5| www.9514.shop-6位数彩票怎么买| www.2188.com-彩票新闻报道| www.03623.com-爱彩人下载| www.40lg.com-彩吧三毛3d布衣图| www.571.me-时时彩开豹子的规律| www.cp2110.com-分分时时彩出号规律| www.nf10.com-手机破解彩票平台| www.t89.top-福彩快三江苏三不同| www.48ak.com-大乐透开奖彩乐乐| www.680.tv-七天彩app二维码| www.026165.com-摇一摇机选彩票5注| www.29182.cc-博友彩怎么注册| www.16jh.com-天天福彩齐鲁网重播| www.00918.cc-福彩3d交流群9| www.065683.com-彩客网手机版完整版| www.197922.com-下载河北快三助手| www.381546.com-体彩周五开什么奖| 彩神购彩www.csgc1.com| www.gl8.com-时时彩改时间| www.vl03.com-福彩快开游戏调整后| www.35837.com-头条彩票app| www.925071.com-福彩彩涂总汇| www.968873.com-彩金的缺点-| www.lt80.com-256手机彩票下载| www.391965.com-天禧彩票网正规吗| www.679777.com-彩神i8-| www.946948.com-彩票816导师| www.vb74.com-易彩快三全天计划| www.49475.com-大学生买彩票中奖| www.558809.com-雨后彩虹的头像图片| www.950230.com-百宝彩陕西11选五| www.395.tv-炫彩弹球ios| www.851616.com-夺金三分彩计划软件| www.67ru.com-乐彩彩票app网址| www.810198.com-竞彩滚球术语| www.099233.com-反水10点彩票平台| www.490892.com-现在有网购彩票吗| www.9998.tv-临沂彩色纸箱包装| www.339564.com-新彩吧3d-| www.505295.com-利盈彩票登陆| www.vu4.com-三分快三最新开奖号| www.012933.com-快赢网快三推荐| www.227221.com-新2彩票下载安装| www.500711.cc-迷彩里面配什么颜色| www.jg20.com-彩票狂人叶向荣资料| www.940880.com-天天乐彩票平台注册| www.909364.com-3d福彩图吧第五版| 68彩票www.68682w.com| www.471921.cc-立博彩票app| www.1005.mobi-星期一有些什么彩票| www.656705.com-彩票平台bug破解| www.146375.com-篮彩比分直播球探| www.891363.com-幸运快三的技巧| www.b36.club-福彩3第字谜总汇| www.803251.com-专业计划彩票网站| www.75lz.com-古建彩绘紋样草图| www.01iw.com-雨后的彩虹好像什么| www.359606.com-瑞彩祥云苹果版网址| www.9965.top-七星彩排列五开奖表| www.439903.com-支持花呗充值彩票| www.53879.cc-世界十大彩票巨奖| www.0509.biz-查询福彩开奖号码| www.445608.com-彩金卖多少钱一克| 金利丰彩票www.630958.com| www.71xu.com-1998世界杯彩票| www.39173.cc-中彩网真的能赚钱吗| www.087377.com-76c94彩票登陆| www.237315.com-彩票倍投好不好| www.479408.com-80彩票合法么| www.657263.com-中国福彩消消乐| www.305858.com-也买彩网站-| www.948952.com-网上彩票平台排名|