近几日在制作一个客户引导页面，其中有一个图片展示而且带滑动的效果。好久没练手了，索性自己写一个插件吧。
依据设计原型，需要满足两套分辨率下图片不同的尺寸，所以在css中使用了media query的相关技术（此处不考虑IE那家伙，但是js可以正常运行），插件中也对按钮的事件以及 $(window).resize 进行了处理。
值得注意的是：
1 var resizeTimer = null; 2 $(window).resize(function() { 3 if (resizeTimer){ 4 clearTimeout(resizeTimer); 5 } 6 resizeTimer = setTimeout(winResizble, 500); 7 });
此处是防止 resize() 事件在实际情况中多次执行而进行的限制。
代码走起：
1 /* 2 * choose site style 3 * dereksunok 4 */ 5 (function($) { 6 $.fn.iocnSlider = function(options) { 7 var settings = { 8 leftBtn: null, 9 rightBtn: null, 10 slidetime: 160, 11 n: 2 12 }; 13 var opts = $.extend(settings, options, {}); 14 15 //公共参数 16 var obj = this.find("ul"); 17 var offset = obj.find("li").width(); 18 var i = obj.find("li").length; 19 var viewSize; 20 21 var resizeTimer = null; 22 $(window).resize(function() { 23 if (resizeTimer){ 24 clearTimeout(resizeTimer); 25 } 26 resizeTimer = setTimeout(winResizble, 500); 27 }); 28 29 //模块尺寸变化时重置offset 30 function winResizble(){ 31 var n = obj.find("li").length-i; 32 var _offset = obj.find("li").width()*n; 33 $(".siteStyleChooseCont ul").animate({ 34 'left':'-'+_offset 35 },300); 36 } 37 38 //右滑方法 39 function rightSlide() { 40 offset = obj.find("li").width(); 41 viewSize = parseInt(obj.parent().width() / offset); 42 if ((i - viewSize) > 0) { 43 obj.animate({ 44 left: "-=" + offset 45 }, settings.slidetime, function() { 46 settings.leftBtn.removeClass("disabled"); 47 }); 48 i--; 49 if ((i - viewSize) == 0) { 50 settings.rightBtn.addClass("disabled"); 51 } 52 }; 53 }; 54 55 //左滑方法 56 function leftSlide() { 57 offset = obj.find("li").width(); 58 viewSize = parseInt(obj.parent().width() / offset); 59 if ((i - viewSize) < obj.find("li").length - viewSize) { 60 ++i; 61 obj.animate({ 62 left: "+=" + offset 63 }, settings.slidetime, function() { 64 settings.rightBtn.removeClass("disabled"); 65 }); 66 if ((i - viewSize) == obj.find("li").length - viewSize) { 67 settings.leftBtn.addClass("disabled"); 68 } 69 }; 70 }; 71 72 //事件绑定 73 if (i - (obj.parent().width() / offset) <= 0) { 74 settings.leftBtn.add(settings.rightBtn).hide(); 75 }; 76 settings.leftBtn.bind("click", leftSlide); 77 settings.rightBtn.bind("click", rightSlide); 78 }; 79 })(jQuery);
html:
1 <div class="siteStyleChoose"> 2 <a href="javascript:;" id="left" class="btns disabled">left</a> 3 <div class="siteStyleChooseCont"> 4 <ul class="fix" style="left: 0px;"> 5 <li class="checkedThis"> 6 <a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a> 7 <span class="checkIcon"></span> 8 </li> 9 <li> 10 <a href="javascript:;"><img src="../images/demo02.jpg" alt=""></a> 11 </li> 12 <li> 13 <a href="javascript:;"><img src="../images/demo03.jpg" alt=""></a> 14 </li> 15 <li> 16 <a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a> 17 </li> 18 <li> 19 <a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a> 20 </li> 21 </ul> 22 </div> 23 <a href="javascript:;" id="right" class="btns">right</a> 24 </div>
css:
1 /*siteStyleChooseCont*/ 2 .siteStyleChoose { position: relative;} 3 .siteStyleChoose > .btns { position:absolute; height: 40px; width: 20px; z-index: 9; overflow: hidden; text-indent: -99em; background-image:url(../images/sliderbtnbg.gif); top: 100px;} 4 .siteStyleChoose #left { left: 10px; background-position: left bottom;} 5 .siteStyleChoose #right { right: 10px; background-position: right bottom;} 6 .siteStyleChoose #left.disabled { background-position: left top;} 7 .siteStyleChoose #right.disabled { background-position: right top;} 8 .siteStyleChooseCont { position: relative; margin: 0 auto; width: 1000px; height: 230px; overflow: hidden;} 9 .siteStyleChooseCont ul { position: relative; width: 999em;} 10 .siteStyleChooseCont li { position: relative; float: left; width: 333px; padding-bottom:6px; text-align: center;} 11 .siteStyleChooseCont li a { outline: none; background-color: #000; display: block; width: 313px; margin: 0 auto;} 12 .siteStyleChooseCont li img { width: 313px;} 13 .siteStyleChooseCont li img:hover,.siteStyleChooseCont li.checkedThis img { opacity: 0.7; filter:alpha(opacity=70);} 14 .siteStyleChooseCont li .checkIcon { position:absolute; bottom: 0; left: 0; height: 80px; width: 84px; background: url(../images/check.png) top left no-repeat;} 15 @media screen and (min-width:1440px) and (max-width:2560px){ 16 .siteStyleChooseCont { width: 1402px; height: 310px;} 17 .siteStyleChooseCont li { width: 467px;} 18 .siteStyleChooseCont li a { width: 413px;} 19 .siteStyleChooseCont li img { width: 413px;} 20 .siteStyleChoose > .btns { top: 140px;} 21 .siteStyleChoose #left { left: 60px;} 22 .siteStyleChoose #right { right: 60px;} 23 } 24 @media screen and (min-width:1680px) and (max-width:2560px){ 25 .siteStyleChoose #left { left: 50px;} 26 .siteStyleChoose #right { right: 50px;} 27 } 28 .siteStyleChooseCont li a,.siteStyleChooseCont li img { 29 -webkit-transition:all .3s linear; 30 -moz-transition:all .3s linear; 31 -ms-transition:all .3s linear; 32 -o-transition:all .3s linear; 33 transition:all .3s linear; 34 }
干货已上，我们该如何使用呢？So Easy！
插件中我只设置了三个参数（左右按钮，滑动时间），照葫芦画瓢，如下：
1 $(".siteStyleChooseCont").iocnSlider({leftBtn:$(".siteStyleChoose #left"),rightBtn:$(".siteStyleChoose #right"),slidetime:400});
当然，在插件之前别忘了调用jquery.js 哟！