jquery 實現(xiàn)TAB切換及動態(tài)效果切換企業(yè)建站云服務(wù)專家介紹, js css 分離,結(jié)構(gòu)清晰簡單, 上下結(jié)構(gòu) 倆個效果,一個是按照毫秒添加時間自動滑動, 第二個效果,是常用TAB切換效果,jquery 均有注釋,參數(shù)可修改,下載即可使用。
使用方法:
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">全智能云服務(wù)專家</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="#">工單系統(tǒng)</a>
<span class="aui-summary-tag">、</span>
<a href="#">營銷服務(wù)</a>
,智能驅(qū)動每一個服務(wù)環(huán)節(jié)
</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>客戶服務(wù)</li>
<li>用戶行為洞察</li>
<li>智能營銷</li>
<li>統(tǒng)一管理分析</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">網(wǎng)頁咨詢</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">按企業(yè)需求接管消息</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">服務(wù)先知</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">服務(wù)先知</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">服務(wù)先知</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">人機協(xié)作</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">工單流轉(zhuǎn)</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">訪問統(tǒng)計</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">關(guān)鍵環(huán)節(jié)營銷</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">主動發(fā)起會話</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">數(shù)據(jù)分析</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>