图片轮播轮播是在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')); } })
到此,九宫格图片轮播特效就完成了。
其实只要掌握了图片轮播的原理,不管在怎么复杂的轮播特效都没问题。(前提是能把静态布局写出来)