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.834977.com-好彩什么颜色好抽| www.953291.com-手手机彩票网| 好彩www.60123t.com| www.69280.com-体彩14场胜负规则| www.029715.com-彩霸王论坛高手| www.117072.com-竞彩足球对阵| www.339772.com-彩票宝买彩票可靠吗| www.530085.com-海南七星彩铁公鸡| www.34221.com-上海福彩免费下载| www.47mc.com-七星彩代理-| www.9450.com-彩票单双大小统计器| www.50874.com-苏宁彩票平台可信吗| www.624207.com-福彩双色球选号查询| www.717902.com-聚彩彩票com| www.174938.com-广西福彩快三走势图| www.868011.com-腾讯分分彩五星规律| www.sv3.com-上海彩票店-| 众发彩票www.979zf.com| www.523601.com-超级时时彩开奖走势| www.973879.cc-二四六天天彩票资料| www.cx51.com-百盛博彩app| www.451561.com-风中彩莲爱你无悔| www.758221.com-987彩票骗局| www.875966.com-广西福利彩票结果| www.7160.me-彩票帮投人员| www.789308.com-t×4cc天下彩| www.697629.com-彩报中心彩报图库一| www.868111.com-星期三开的彩票| www.3721.biz-福彩网充值网址| www.66319.cc-2118彩票手机版| www.027629.com-易彩网可以赚钱吗| www.632882.com-福彩3d玩2d-| www.781498.com-福利彩票乐彩同| www.878868.com-世界杯彩票玩法规则| www.6525.top-高兴彩票是否违法| www.181843.com-手机购彩平台| www.2867.net-彩虹糖的梦歌词意思| www.093938.com-高频彩百合男骗局| www.494649.com-竞彩八串一今日推荐| www.611866.com-福彩投注站点查询| www.mj06.com-51时时彩计划网| www.z01.net-正好彩票网排三| www.55jr.com-中彩网四川福彩网| www.971163.com-体彩开奖公告历史| www.dp68.com-118彩票真黑| www.47072.com-秒速时时彩公式打法| www.yn02.com-马来西亚福彩分几种| www.83ef.com-喝彩中华蔡正仁| www.3xm.cc-亚洲博彩公司名称| www.578198.com-彩票带单群软| www.935838.com-福彩中奖几率大| www.0890.net-郑州彩民中双色球| www.326838.com-快三走势图分析图解| www.532240.com-七星彩怎样算是中奖| www.611105.com-谁有好的彩票计划群| www.685568.cc-福彩金胆王一语定| www.rx82.com-手机版分分彩软件| www.432121.com-彩票法律法规公安| www.7093.live-七彩联盟有哪些学校| www.51977.com-彩票中大奖怎么领取| www.762099.com-竞彩足彩彩票下载| www.25en.com-心同彩票平台| www.5422.vip-彩钢瓦光伏安装价格| www.pd98.com-上海市福彩排列七| www.85zj.com-七乐彩7期开奘结果| www.5170.cm-七乐彩周五走势图表| www.85635.com-购买体育彩票的经验| www.885106.com-有玩同乐彩票的吗| www.952254.com-世界三大博彩| 网易彩票www.26163y.com| www.882062.com-彩票工资车群| www.985610.com-竞彩足球买比分技巧| www.kj40.com-彩票助手工具软件| www.10an.com-福彩123开奖| www.783.in-福彩3d迷解-| www.510501.com-超长彩虹屁-| www.979150.com-旧版够力七星彩| www.qt11.com-李永志彩票案结果| www.68933.com-彩票店主助手| www.db37.com-湖北快三软件| www.656622.com-北京开彩票店| www.xu.com-网上能买快三吗| www.60350.com-最把握的黑彩平台| www.53rr.com-如何做好福彩管理员| www.07087.com-七星彩梦册解码| www.293712.com-彩神通三码会员| www.13jb.com-福利彩票中几个数字| www.z54.net-彩神8iv-| www.093633.com-彩世界app苹果版| www.34562.com-七彩奖-| www.396023.com-彩博娱乐网址| www.506107.com-江苏体彩七位数历史| www.661365.com-合买彩票中奖新闻| www.780522.com-ai足彩预测-| www.829712.com-ok彩票怎么没有了| www.874361.com-大发快三和值预测| www.912862.com-彩客彩票可靠吗| www.962034.com-安徽快三计划全天| www.990456.cc-怎么注册汇彩网| www.cp6799.com-快三豹子后出号规律| www.if13.com-手机中彩网下载版| www.xb45.com-河南幸运彩在线直播| www.428923.com-彩博娱乐网址大全| www.626288.cc-中国彩票都是假的| www.500046.com-怎样兑福利彩票| www.617336.com-榆次福彩中心| www.999050.com-天天福彩彩-| www.xw48.com-怎么买彩票中奖| www.110935.com-手机58彩票网| www.404179.com-王刚讲故事彩票大王| www.571666.com-菲律宾快三-| 日彩网www.rcw8811.com| www.ig53.com-福彩3d牛彩网| www.zb20.com-五福彩票网app| www.12on.com-彩票官方网购买| www.65ya.com-566299彩票-| www.34390.com-福彩3d菠萝彩魔图| www.85115.com-蓝球杀号彩乐乐| www.087872.com-福彩快三怎么赚钱| www.560602.com-体彩彩票码怎么扫| www.708895.com-香港金财神彩神网站| www.117567.com-竞竞彩比分直播| www.98962.cc-足彩计算器手机版| www.750896.com-今晚七星彩开奘结果| www.42id.com-富彩彩票手机版| www.974478.com-谁能破解腾讯分分彩| www.27oe.com-怎么查看体彩票中奖| www.4606.cc-彩票咋买才能中奖| www.kj08.com-彩票走势-| www.668637.com-牛彩3d谜汇总图| www.760334.com-拉萨快三走图| www.884908.com-体育彩票投注网站| www.sf33.cc-申利娱乐时时彩申请| www.tp62.com-彩票号码生成器下载| www.748101.com-旺彩双色球最新版本| www.851525.com-重庆时时彩购买平台| www.832902.com-买彩票机选容易中| www.3491.vip-博彩平台出租| www.576389.com-足球彩票系统升级| www.9671.me-彩一万网站-| www.05244.cc-彩票游戏赚钱| www.15qv.com-彩票店开业对联| www.831831.com-大星七乐彩走势图| www.895579.com-彩票高频彩绝技| JJ彩票www.61411.cc| www.pc18.com-河北快三奖金表| www.0956.cc-cp544快三计划| www.613976.com-数字彩票分析器| www.789031.com-36彩票全国开奖| www.097933.com-关注中彩股份| www.s21.in-湖北快三未开号码| www.857.mobi-360够彩-| www.5835.cn-体彩二串一稳赚| www.09303.com-鸿鼎网彩票论坛| www.255781.com-七星彩怎么是中奖| www.776280.com-火箭彩票安卓版| www.905711.com-快三高频彩网址| www.ib47.com-安徽省体彩兑奖地址| www.34md.com-来彩彩票020平台| www.16836.com-云发购快三智能解析| www.112562.com-吉林快三投注群| www.361656.com-爱玩彩票手机版下载| www.359197.com-福d三彩开奖| www.72qw.com-福彩天下网址是多少|