图片轮播轮播是在web开发中经常会用到的js轮播特效，比如：banner、广告、照片墙等。也正因为图片轮播应用广泛，尽管网上有各式各样的图片轮播jQuery特效插件，但也不能囊括所有的特效，因为有些特效可能不太常用，或者暂时还没人用过。
前不久无意间看到了一种淘宝客推广广告图片轮播特效，它九宫格类型的，在网上找了一圈也没有找到一样的，用别人的该吧太费事，于是就参照它自己用Jquery写了一个九宫格图片轮播特效。感觉这种特效还不错，所以就想分享出来，顺便说这个特效是怎么写的。
先看看最终的成品特效：
写过图片轮播特效的人都知道，其实轮播特效的就是利用定时器来实现图片轮播的。
1、布局
先找到特效静止不动那一刻的布局，然后按照这个来布局
<div class="ad-container">
<div class="ad-logo"><img src="https://img.alicdn.com/tps/i1/T1eSpcFAhfXXcq1Onf-42-90.gif"></div>
<div class="ad-container-left">
<div class="ad-container-left-list">
<div class="ad-container-left-list-ul ad-ul-left">
<ul>
<li class="ad-active"><img src="images/a1.jpg" data-url="http://url1" alt="chanp 1" data-old="50.00" data-new="20.00"></li>
<li><img src="images/a2.jpg" data-url="http://ur2" alt="chanp 2" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a3.jpg" data-url="http://ur3" alt="chanp 3" data-old="60.00" data-new="30.00"><div class="ad-mask"></div></li>
<li><img src="images/a4.jpg" data-url="http://ur4" alt="chanp 4" data-old="70.00" data-new="40.00"><div class="ad-mask"></div></li>
<li><img src="images/a5.jpg" data-url="http://ur5" alt="chanp 5" data-old="80.00" data-new="50.00"><div class="ad-mask"></div></li>
<li><img src="images/a6.jpg" data-url="http://ur6" alt="chanp 6" data-old="90.00" data-new="60.00"><div class="ad-mask"></div></li>
<li><img src="images/a7.jpg" data-url="http://ur7" alt="chanp 7" data-old="10.00" data-new="5.00"><div class="ad-mask"></div></li>
<li><img src="images/a8.jpg" data-url="http://ur8" alt="chanp 8" data-old="20.00" data-new="10.00"><div class="ad-mask"></div></li>
<li><img src="images/a9.jpg" data-url="http://ur9" alt="chanp 9" data-old="30.00" data-new="20.00"><div class="ad-mask"></div></li>
</ul>
</div>
<div class="ad-container-left-list-img ad-img-left">
<a href="http://url1" target="_blank" rel="nofollow"><img src="images/a1.jpg" alt="chanp 1"></a>
</div>
</div>
<div class="ad-container-left-pro ad-pro-left">
<div>
<span class="ad-title"><a href="" target="_blank" rel="nofollow">chanp 1</a></span><br>
<span class="ad-pro-new"><i>￥</i><em>20.00</em></span>
<span class="ad-pro-old"><i>￥</i><em>50.00</em></span><br>
<span><img data-src="images/1.png" src="images/1.png"></span>
</div>
</div>
</div>
<div class="ad-container-right">
<div class="ad-container-left-list">
<div class="ad-container-left-list-ul ad-ul-right">
<ul>
<li class="ad-active"><img src="images/a1.jpg" data-url="http://url1" alt="chanp 1" data-old="50.00" data-new="20.00"></li>
<li><img src="images/a2.jpg" data-url="http://ur2" alt="chanp 2" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a3.jpg" data-url="http://ur3" alt="chanp 3" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a4.jpg" data-url="http://ur4" alt="chanp 4" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a5.jpg" data-url="http://ur5" alt="chanp 5" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a6.jpg" data-url="http://ur6" alt="chanp 6" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a7.jpg" data-url="http://ur7" alt="chanp 7" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a8.jpg" data-url="http://ur8" alt="chanp 8" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
<li><img src="images/a9.jpg" data-url="http://ur9" alt="chanp 9" data-old="50.00" data-new="20.00"><div class="ad-mask"></div></li>
</ul>
</div>
<div class="ad-container-left-list-img ad-img-right">
<a href="http://url1" target="_blank" rel="nofollow"><img src="images/a1.jpg" alt="chanp 1"></a>
</div>
</div>
<div class="ad-container-left-pro ad-pro-right">
<div>
<span class="ad-title"><a href="" target="_blank" rel="nofollow"> chanp 1 </a></span><br>
<span class="ad-pro-new"><i>￥</i><em>20.00</em></span>
<span class="ad-pro-old"><i>￥</i><em>50.00</em></span><br>
<span><img data-src="images/1.png" src="images/1.png"></span>
</div>
</div>
</div>
</div>
<style type="text/css">
body,div,ul,li,p,span,i,em,img{padding: 0;margin: 0;}
li{list-style: none;;}
.ad-container{margin:200px auto;width: 790px;height: auto;border: 1px solid #ddd;overflow: hidden;}
.ad-container .ad-logo{float: left;}
.ad-container-left,.ad-container-right{width: 45%;float: left;height: 100%;height: 100%;}
.ad-container-left-list, .ad-container-left-pro{width: 50%;float: left;}
.ad-container-left-pro{display: table;height: 88px;}
.ad-container-left-pro div{display: table-cell;vertical-align: middle;line-height: 21px;}
.ad-container-left-list-ul,.ad-container-left-list-img{width: 50%;float: left;height: 100%;}
.ad-container-left-list-img img{display: block; width: 100%;}
.ad-container-left-list-ul ul{width: 100%;height: 100%;overflow: hidden;}
.ad-container-left-list-ul ul li{position: relative; border: none;padding: 0;margin: 0; width: 33%;float: left;background-color: rgba(255,255,255,0.5);margin: 0.15%;height: 33%;}
.ad-container-left-list-ul ul li img{display:block;width: 100%;}
.ad-container-left-list-ul .ad-mask{width: 100%;height: 100%; position: absolute;top: 0;left: 0;background-color: rgba(255,255,255,0.5);}
.ad-container-left-list-img{width: 50%;float: left;}
</style>
html静态布局会html+css人应该都没问题，不过这里用了遮罩层，当前不显示的其余8张图都加上遮罩，当前显示的则不加遮罩，轮播的时候可以看成是去遮罩，显示谁谁的遮罩就去掉，其他8张则加上遮罩，然后在右边显示当前显示图片的大图。
此外，这里还用了html5的自定义属性，因为要在右边显示当前广告图片对应的标题和价格，如果放在span标签或者其他标签后面处理起来会比较麻烦，但是html5可以给标签添加自定义属性，何不利用一下。轮播的时候只需通过jQuery读取img里的自定义属性的值写到右边。
下面用jQuery来实现图片轮播：
$(function(){
$('.ad-mask').css('height',$('.ad-mask').width()+'px');
$('.ad-ul-left ul li').mouseover(function(){
if (leftTimer) {
clearInterval(leftTimer)
}
var nowObj = $(this);
var dire = 'left';
objSwitch(nowObj,dire);
})
$('.ad-ul-right ul li').mouseover(function(){
if (rightTimer) {
clearInterval(rightTimer)
}
var nowObj = $(this);
var dire = 'right';
objSwitch(nowObj,dire);
})
$('.ad-ul-left ul li').mouseout(function(){
leftTimer = setInterval(leftMove,1500);
})
$('.ad-ul-right ul li').mouseout(function(){
rightTimer = setInterval(rightMove,1500);
})
//为了避免左右两边图片轮播的冲突，这里分别给左右两边加定时器
var leftTimer = setInterval(leftMove,1500);
var rightTimer = setInterval(rightMove,1500);
function leftMove(){
flgLeft = $('.ad-ul-left .ad-active').index();
if (flgLeft > ($('.ad-ul-left ul li').length - 1)) {
flgLeft = 0;
}else{
flgLeft = flgLeft + 1;
}
objLeft = $('.ad-ul-left ul li').eq(flgLeft);
objSwitch(objLeft,'left');
}
function rightMove(){
flgRight = $('.ad-ul-right .ad-active').index();
if (flgRight > ($('.ad-ul-right ul li').length - 1)) {
flgRight = 0;
}else{
flgRight = flgRight + 1;
}
objRight = $('.ad-ul-right ul li').eq(flgRight);
objSwitch(objRight,'right');
}
function objSwitch(obj,dire){
$('.ad-ul-' + dire + ' ul li').removeClass();
$('.ad-ul-' + dire + ' ul li div').remove();
$('.ad-ul-' + dire + ' ul li').append('<div class="ad-mask"></div>')
obj.addClass('ad-active');
obj.find('div').remove();
$('.ad-img-' + dire + ' img').attr('src',obj.find('img').attr('src'))
$('.ad-img-' + dire + ' img').attr('alt',obj.find('img').attr('alt'))
$('.ad-img-' + dire + ' a').attr('href',obj.find('img').attr('data-url'))
$('.ad-pro-' + dire + ' .ad-title a').attr('href',obj.find('img').attr('data-url'));
$('.ad-pro-' + dire + ' .ad-title a').text(obj.find('img').attr('alt'));
$('.ad-pro-' + dire + ' .ad-pro-new em').text(obj.find('img').attr('data-new'));
$('.ad-pro-' + dire + ' .ad-pro-old em').text(obj.find('img').attr('data-old'));
}
})到此，九宫格图片轮播特效就完成了。
其实只要掌握了图片轮播的原理，不管在怎么复杂的轮播特效都没问题。（前提是能把静态布局写出来）
