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.3527.win-彩票121开奖| www.472821.com-云南快乐十分彩票空| www.578160.cc-足球竞彩论坛| www.365027.com-彩民红高手-| www.662835.com-中国国彩app下载| www.801296.com-福利彩票店费用| www.924883.com-8亿彩票-| www.is3.cc-内蒙古快三直播现场| www.xl68.com-彩票123官网| www.1688.pink-临沂中彩福骗局| www.890069.com-nba体育彩票| www.gd70.com-双色球中奖彩票| www.192013.com-大乐透杀号彩经网| www.391744.com-彩票之神陈华双色球| www.004538.com-老九乐购彩票下载| www.134833.com-网上哪能买河北快三| www.28dh.com-福利彩票网购平台| www.0931.site-彩票合买方案| www.219672.com-购彩网站-| www.381725.com-泰安福彩投注站| www.221539.com-瑞彩网下载-| www.56055.com-网上快3彩票违法吗| www.77053.com-体彩中奖概率怎么算| www.073151.com-丹麦快乐彩高手计划| www.230090.com-共享彩票app下载| www.338447.com-快三投注计算表格| www.pi5.com-甘肃快三15号| www.52cs.com-利彩是怎样的骗局| www.4570.cm-七乐彩巧35期开| www.21963.com-彩票刷子群-| www.088053.com-上海福利彩一官方网| www.188291.com-河南幸运彩-| www.543679.com-足球彩票算不算加时| www.9299.bid-分分彩后二个人经验| www.55121.com-竞彩赢了没到账| www.015818.com-够力七星彩官网最新| www.610593.com-福利彩票102期| www.773241.com-各种手机彩票工具| www.890493.cc-江西彩礼高-| www.752393.com-彩虹六号国服预约| www.994380.com-中奖彩票生成器| www.306.hk-领航时时彩qq群| www.4062.cn-海尔冰箱彩晶王子| www.42397.com-k彩下载-| www.sw21.com-7星彩大奖-| www.8183.net-高频彩包括什么彩| www.78315.com-彩票选1到几个号码| www.181460.com-吉林快三技巧| www.528668.com-陕西福彩有快三吗| www.697157.com-亿元彩票软件合法吗| 七彩www.53900i.com| www.712676.com-秒速时时采彩开奖| www.687071.com-广东福彩官网手机版| 网购彩票www.cp7777b.com| www.780.in-福彩中心预测| www.255030.com-凤凰时时彩app| www.5988.cc-潍坊体彩兑奖| www.250058.com-冀彩宝官网靠谱吗| www.jw37.com-彩库宝典1.3.1| www.53813.cc-深圳东方亮彩怎么样| www.344918.com-奇妙时时彩趋势软件| www.684000.com-中国竞彩网传统体彩| www.301789.com-福利彩票时时彩助手| www.573877.com-用数学的眼光买彩票| www.878629.com-河北福彩快3推| www.7351.pw-彩虹六号基本按键| www.558221.com-高手彩宝贝杀号| www.v76.org-87彩票app下载| www.871891.com-江苏利彩开奖结果| www.960576.com-注册送彩-| www.cai6769.com各种快三预测| www.xq49.com-七星彩2287期| www.1017.biz-神彩黄金液危害| www.60431.cc-易旺彩票是真的假的| www.160673.com-福彩任三-| www.780116.com-福彩三d大讲堂| www.6573.org-全中彩票安卓版下载| www.642611.com-双色球彩票黑色方块| www.01010.com-万彩网址-| www.8188.online8炫彩自助彩票终端| www.36662.cc-澳门港彩挂牌| www.030124.com-c8cn万彩吧六彩| www.485.in-多乐福利彩票| www.hg73.com-极速快三大小计划网| www.58ch.com-百宝世嘉彩票快三| www.293379.com-香港权威彩神网网址| www.9xh.com-今日的彩票开奖号码| www.171219.com-安徽快三奖金对照表| www.858425.com-三彩丽雪官方旗舰店| www.18852.cc-中彩网彩票官方网| www.73xs.cc-福彩3d黑龙赌王| www.00210.cc-易彩2.0最新网站| www.404403.com-彩铅简笔画大全| www.251698.com-彩经下载-| www.345052.com-大发彩票是黑的| www.yc6.com-京彩彩票app| www.82.club-群英会彩乐乐| www.728068.com-彩票83-| www.cp1518.com-快三线上平台| www.805892.com-体彩刮刮乐有哪些| 日彩网www.rcw8866.com| www.823612.com-七星彩计算方法| www.53499.cc-好彩堂主页-| www.315851.com-重庆时时彩开奖官网| www.59kv.com-彩钢瓦机双层多少钱| 中彩网www.71233c.com| www.343331.com-体育彩票彩票机| www.qt10.cc-台湾彩票种类| www.56396.cc-金彩网高手天下网| www.657588.com-大乐透彩票杀号软件| www.8126.loan-福彩3d试机号金碼| www.cp7997.com-北京快三投注| www.328891.com-时时彩计划| www.yh74.cc-我要买彩票怎么买| www.145791.com-国家福彩是什么意思| www.53zv.com-2008年彩票大奖| www.54655.cc-微信送99彩金| www.417.cn-时时中彩票手机版| www.367750.com-彩铅画人物古风全身| www.766064.com-竞彩足球彩票图片| www.1895.cc-今日彩吧水果图一板| www.019926.com-湖北快三杀号360| www.323391.com-七乐彩随机选| www.603587.com-山西省体彩大奖| www.235008.com-九州博彩官网| www.506690.com-福彩3d麦久网| www.720651.com-福彩自助终端公众号| www.10015.com-66彩票登录-| www.330994.com-棋牌彩票推广| www.kd76.com-达人彩票平台| www.3404.vip-彩家网-| www.75743.com-吉祥彩票官网| www.291951.com-快三所有号码| www.535115.com-彩票有几位-| www.671578.com-彩礼一万-| www.hd13.com-湖南福利彩票25选| www.82ep.com-足球胜负彩容易吗| www.924.me-临沂福利彩票| www.76630.com-玩彩票大平台登录| www.284818.com-快乐5分彩计划软件| www.516862.com-氵三d彩票字谜总汇| www.806180.com-西赵口彩吧早报1| www.054826.com-国彩有哪些平台| www.254477.com-旺彩彩票预测高手| www.629702.com-彩票龙虎是什么意思| www.953840.com-牛牛网彩票-| www.ta11.com-哪种彩票是6位数字| www.94sm.com-玩彩票怎么损止| www.30064.com-体彩大乐透直播摇奖| www.192533.com-11选五彩票网站| www.755841.com-苹果6plus彩膜| www.953161.com-彩票投注手-| www.128960.com-3000万彩票平台| www.699580.com-上海福彩双色球开奖| 500彩票www.330892.com| www.35277.cc-快三输了-| www.9289.vip-彩票标志图片大全| www.89967.com-七星彩摇奖是随机吗| www.278713.com-戒彩吧-| www.480054.com-购乐彩网-| www.769527.com-七彩虹显卡怎么样| www.cai5123.com内蒙福彩快三开奖| www.1645.com-中国千亿彩票| www.0250.loan-时时彩奖金对照|