jQuery滑动手风琴内容切换特效，先来看看效果：
部分核心的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="cloud-product-box">
<div class="cloud-product-wrapper">
<div class="cloud-product">
<p class="cloud-product-title"><span>提供国内顶尖、快速、稳定的云计算产品</span></p>
<p class="cloud-product-explain">计算、存储、监控、安全，完善的云产品满足您的一切所需</p>
<ul class="cloud-product-ul clearfix">
<li data-index="1" class="active">
<div class="normal-inner">
<div class="cloud-product-single-bottom clearfix">
<div class="empty-space">
<div class="bg-product-pic server-header-01"></div>
</div>
<h2 class="product-introduce-title">云服务器</h2>
<p class="product-introduce-content">极速稳定高弹性的计算服务</p>
<div class="product-introduce-list">
<p class="introduce-list-small">强大的计算性能</p>
<p class="introduce-list-small">弹性的按需扩展</p>
<p class="introduce-list-small">更低的网络时延</p>
</div>
<p class="product-introduce-price">
<span class="price-blue">49</span>元 /月起
</p>
</div>
</div>
<div class="active-inner active-inner-01 clearfix">
<div class="active-inner-item">
<a class="introduce-link" target="_blank" href="#"></a>
<div class="empty-space">
<div class="bg-product-pic server-header-active-01"></div>
</div>
<h2 class="product-introduce-title active-product-introduce-title ">云服务器</h2>
<p class="product-introduce-content">极速稳定高弹性的计算服务</p>
<div class="product-introduce-list">
<p class="introduce-list-large">
采用由数据切片技术构建的三层存储功能，切实保护客户数据的安全。同时可弹性扩展的资源用量，为客户业务在高峰期的顺畅保驾护航
</p>
</div>
<p class="product-introduce-price">
<span class="price-white">49</span>元 /月起
</p>
<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
</div>
</div>
</li>
<li data-index="2">
<div class="normal-inner">
<div class="cloud-product-single-bottom clearfix">
<div class="empty-space">
<div class="bg-product-pic server-header-02"></div>
</div>
<h2 class="product-introduce-title">服务器托管</h2>
<p class="product-introduce-content">安全贴心高品质的托管服务</p>
<div class="product-introduce-list">
<p class="introduce-list-small">完善的机房设施</p>
<p class="introduce-list-small">领先的硬件支持</p>
<p class="introduce-list-small">独有的骨干网络</p>
</div>
<p class="product-introduce-price">
<span class="price-blue">450</span>元 /月起
</p>
</div>
</div>
<div class="active-inner active-inner-02 clearfix">
<div class="active-inner-item">
<a class="introduce-link" target="_blank" href="#"></a>
<div class="empty-space">
<div class="bg-product-pic server-header-active-02"></div>
</div>
<h2 class="product-introduce-title active-product-introduce-title">服务器托管</h2>
<p class="product-introduce-content">安全贴心高品质的托管服务</p>
<div class="product-introduce-list">
<p class="introduce-list-large">
T3+级别数据中心，具备完善的机房设施，自建光纤网络，独有的核心骨干网络有效保证高品质的网络环境和丰富的带宽资源
</p>
</div>
<p class="product-introduce-price">
<span class="price-white">450</span>元 /月起
</p>
<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
</div>
</div>
</li>
<li data-index="3">
<div class="normal-inner">
<div class="cloud-product-single-bottom clearfix">
<div class="empty-space">
<div class="bg-product-pic server-header-03"></div>
</div>
<h2 class="product-introduce-title">云虚拟主机</h2>
<p class="product-introduce-content">基于云计算的虚拟主机服务</p>
<div class="product-introduce-list">
<p class="introduce-list-small">卓越的性能体验</p>
<p class="introduce-list-small">出色的防御能力</p>
<p class="introduce-list-small">丰富的带宽资源</p>
</div>
<p class="product-introduce-price">
<span class="price-blue">7</span>元 /月起
</p>
</div>
</div>
<div class="active-inner active-inner-03 clearfix">
<div class="active-inner-item">
<a class="introduce-link" target="_blank" href="#"></a>
<div class="empty-space">
<div class="bg-product-pic server-header-active-03"></div>
</div>
<h2 class="product-introduce-title active-product-introduce-title ">云虚拟主机</h2>
<p class="product-introduce-content">基于云计算的虚拟主机服务</p>
<div class="product-introduce-list">
<p class="introduce-list-large">
架设在云高可用云服务器之上，具备高在线率、高安全性、高稳定性等多项优势，提供独立IP，特别适用于对网站运行质量有较高要求的用户
</p>
</div>
<p class="product-introduce-price">
<span class="price-white">7</span>元 /月起
</p>
<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
</div>
</div>
</li>
<li data-index="4">
<div class="normal-inner">
<div class="cloud-product-single-bottom clearfix">
<div class="empty-space">
<div class="bg-product-pic server-header-04"></div>
</div>
<h2 class="product-introduce-title">SSL证书</h2>
<p class="product-introduce-content">提供一站式的证书部署服务</p>
<div class="product-introduce-list">
<p class="introduce-list-small">顶级CA机构授权颁发</p>
<p class="introduce-list-small">加密保护数据传输安全</p>
<p class="introduce-list-small">支持所有浏览器和移动设备</p>
</div>
<p class="product-introduce-price">
<span class="price-blue">1</span>元 /年起
</p>
</div>
</div>
<div class="active-inner active-inner-04 clearfix">
<div class="active-inner-item">
<a class="introduce-link" target="_blank" href="#"></a>
<div class="empty-space">
<div class="bg-product-pic server-header-active-04"></div>
</div>
<h2 class="product-introduce-title active-product-introduce-title ">SSL证书</h2>
<p class="product-introduce-content">提供一站式的证书部署服务</p>
<div class="product-introduce-list">
<p class="introduce-list-large">
实现网站HTTPS化，使网站可信，防劫持、防篡改、防监听。并对云上证书进行统一生命周期管理，简化证书部署，一键分发到云上产品
</p>
</div>
<p class="product-introduce-price">
<span class="price-white">1</span>元 /年起
</p>
<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
</div>
</div>
</li>
<li data-index="5">
<div class="normal-inner">
<div class="cloud-product-single-bottom clearfix">
<div class="empty-space">
<div class="bg-product-pic server-header-05"></div>
</div>
<h2 class="product-introduce-title">域名注册</h2>
<p class="product-introduce-content">提供五星级的域名注册服务</p>
<div class="product-introduce-list">
<p class="introduce-list-small">域名实时过户</p>
<p class="introduce-list-small">智能双线解析</p>
<p class="introduce-list-small">whois隐私保护</p>
</div>
<p class="product-introduce-price">
<span class="price-blue">15</span>元 /年起
</p>
</div>
</div>
<div class="active-inner active-inner-05 clearfix">
<div class="active-inner-item">
<a class="introduce-link" target="_blank" href="#"></a>
<div class="empty-space">
<div class="bg-product-pic server-header-active-05"></div>
</div>
<h2 class="product-introduce-title active-product-introduce-title ">域名注册</h2>
<p class="product-introduce-content">提供五星级的域名注册服务</p>
<div class="product-introduce-list">
<p class="introduce-list-large">
超高的解析响应速度，强大的域名自助管理平台，免费的域名隐私保护服务，坚持让您花少量的费用，享更好的产品和服务
</p>
</div>
<p class="product-introduce-price">
<span class="price-white">15</span>元 /年起
</p>
<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var c=1;
$(".cloud-product-ul>li").mouseenter(function(){
var e=$(this);
c=e.data("index");
var e=$(this);
setTimeout(function(){
if(c==e.data("index")){
$(".cloud-product-ul>li").removeClass("active");
e.addClass("active")
}
},120)
});
});
</script>
</body>
</html>
全部代码：jQuery滑动手风琴内容切换特效