jQuery制作合作客户企业商标图片网格布局，带箭头翻页控制。合作客户，客户心声tab布局切换效果代码。
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
3、body引入HTML代码
<div class="customer">
<div class="customer_t">
<h2>风雨同行·共同成长</h2>
<p>现在，服务的上千家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。</p>
</div>
<div class="customer_top">
<a href="javascript:;" class="two_sel" id="solutiont1" onMouseOver="hoverlia4('solutiont', 'solutiondiv', 1, 2,'two_sel')">合作客户</a>
<a href="javascript:;" id="solutiont2" onMouseOver="hoverlia4('solutiont', 'solutiondiv', 2, 2,'two_sel')">客户心声</a>
</div>
<div id="solutiondiv1">
<div class="customer_list w1440 anim anim-2 anim-show">
<div class="customer_items">
<div class="item" style="display: block;">
<ul>
<li>
<img src="statics/images/i_img1.jpg" class="imgbg" alt="10年有经验">
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2.jpg" alt="光大环保"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_6.jpg" alt="南深股份"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_2.jpg" alt="大族激光"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_3.jpg" alt="华润"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_4.jpg" alt="畅捷通"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_5.jpg" alt="康美"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_1.jpg" alt="安托山"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_7.jpg" alt="香港中文大学"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_8.jpg" alt="迈瑞"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_9.jpg" alt="博览亚太"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_10.jpg" alt="鼎颂"></div>
</li>
</ul>
</div>
<div class="item" style="display: none;">
<ul>
<li>
<img src="statics/images/i_img1.jpg" class="imgbg" alt="10年有态度">
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_11.jpg" alt="和诗"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_12.jpg" alt="简宁安"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_13.jpg" alt="柯丽尔"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_14.jpg" alt="米希兰"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_15.jpg" alt="普乐坊"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_16.jpg" alt="普罗米修"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_17.jpg" alt="莎米特"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_18.jpg" alt="壹进制"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_19.jpg" alt="怡太积"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_20.jpg" alt="易普森"></div>
</li>
<li>
<div class="imgs"><img src="statics/images/i_img2_21.jpg" alt="中国商务航空"></div>
</li>
</ul>
</div>
</div>
<div class="customer-buttons">
<div class="owl-prev disabled">prev</div>
<div class="owl-next ">next</div>
</div>
</div>
</div>
<div id="solutiondiv2" class="divhidden">
<div class="solution_ul2 w1440 anim anim-2 anim-show">
<ul>
<li>
<div class="shade"><u></u></div><img alt="光大环保" src="statics/images/i_img3.jpg">
<p><strong>光大环保</strong><br>我是光大环保项目部范总，不谦虚的说，光大环保项目外包很多多，但是光大环保在选择了和易百讯合作后在制作过程还有客服服务中，非常的满意！易百讯能够根据我们的基础要求进行逻辑思维拓展，能够使我们的初步想法转化为实际的设计效果，使我们的用户体验达到更加完美的效果，这次和易百讯合作，光大非常满意，也希望在未来，能够和易百讯就网站建设领域进行更深层次的合作，共同促进网站建设行业健康蓬勃的发展！</p>
<div class="bg"><u></u></div>
</li>
<li>
<div class="shade"><u></u></div><img alt="安托山集团" src="statics/images/solution_img2.jpg">
<p><strong>安托山</strong><br>我是安托山技术部余总，10多亿元人民币建造的安托山沙井高科技工业园，占地28万平方米, 总建筑面积86万平方米，在公司网站建设中，经过层层筛选，我们选择易百讯为我们提供网站建设服务，而在以后合作的日子里，我们深刻的感受到了易百讯人的敬业！7*24小时的售后服务，让我们随时能够找到售后客服，建站后期易百讯也会及时的巡护网站，一旦发现网站有漏洞，也会及时的提出并帮我们解决，这种主动热情的售后服务使我们看到了一个企业真正的文化和内涵，我们也明白选择易百讯我们没有选择错！</p>
<div class="bg"><u></u></div>
</li>
<li>
<div class="shade"><u></u></div><img alt="北大方正" src="statics/images/solution_img3.jpg">
<p><strong>北大方正</strong><br>我是方正网络技术总监陈文磊，不可否认，易百讯是一个很朝气蓬勃的团队，也是一个很积极向上的团队，每一次沟通合作，总能给我们带来新的东西，有时候我们不仅仅在网站建设方面进行合作，还常常就我们的品牌策略进行深入的洽谈，他们能将我们想要的东西甚至我们还没考虑到的细节展示在我们的网站中，为我们的品牌形象做出更精准的阐释。再次我也希望，我们方正应该学习易百讯的团队精神！</p>
<div class="bg"><u></u></div>
</li>
<li>
<div class="shade"><u></u></div><img alt="华润科技" src="statics/images/solution_img4.jpg">
<p><strong>华润科技</strong><br>我是华润科技部经理田文军，这已经是我们华润第四次和易百讯合作了，与前三次一样依然合作的很开心。与易百讯合作让我放心的是易百讯的设计、服务和专业性。现在深圳有很多号称可以做个性化网站定制的公司，但太多设计非常一般、服务不好，且鱼龙混杂，一不小心就会被骗，还有可能中途合作不下去。很多公司也都仅仅只能做网站建设服务，无法从专业上给予我们建设性的意见，这是很多公司都无法办到的，但易百讯做到了。无论在设计、服务上还是专业性上，易百讯让我都很放心，愿易百讯再接再厉，为企业提供更多更优质服务。</p>
<div class="bg"><u></u></div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
//js tab功能
function g(o) {
return document.getElementById(o);
}
function hoverlia4(t_n, t_n2, n, k, className) {
for(var i = 1; i <= k; i++) {
g(t_n2 + i).className = 'divhidden';
g(t_n + i).className = '';
$("#" + t_n2 + i).find(".anim").removeClass("anim-show");
}
g(t_n2 + n).className = '';
g(t_n + n).className = className;
setTimeout(function() {
$("#" + t_n2 + n).find(".anim").addClass("anim-show");
}, 6)
}
//合作客户翻页调用
$(".customer-buttons div").click(function() {
var linum = $(this).index();
var CaseList = $(".customer_items .item");
$(this).addClass('disabled').siblings().removeClass('disabled');
CaseList.eq(linum).show().siblings().hide();
});
</script>
