简单的图片滑动效果插件 jQuery.iocnSlider.js

近几日在制作一个客户引导页面，其中有一个图片展示而且带滑动的效果。好久没练手了，索性自己写一个插件吧。

依据设计原型，需要满足两套分辨率下图片不同的尺寸，所以在css中使用了media query的相关技术（此处不考虑IE那家伙，但是js可以正常运行），插件中也对按钮的事件以及 $(window).resize 进行了处理。

值得注意的是：

 var resizeTimer = null;
 $(window).resize(function() {
     if (resizeTimer){
         clearTimeout(resizeTimer);
     }
     resizeTimer = setTimeout(winResizble, 500);
 });

此处是防止 resize() 事件在实际情况中多次执行而进行的限制。

代码走起：

 /*
  * choose site style
  * dereksunok
  */
 (function($) {
     $.fn.iocnSlider = function(options) {
         var settings = {
             leftBtn: null,
             rightBtn: null,
             slidetime: 160,
             n: 2
         };
         var opts = $.extend(settings, options, {});

         //公共参数
         var obj = this.find("ul");
         var offset = obj.find("li").width();
         var i = obj.find("li").length;
         var viewSize;

         var resizeTimer = null;
         $(window).resize(function() {
             if (resizeTimer){
                 clearTimeout(resizeTimer);
             }
             resizeTimer = setTimeout(winResizble, 500);
         });

         //模块尺寸变化时重置offset
         function winResizble(){
             var n = obj.find("li").length-i;
             var _offset = obj.find("li").width()*n;
             $(".siteStyleChooseCont ul").animate({
                 'left':'-'+_offset
             },300);
         }

         //右滑方法
         function rightSlide() {
             offset = obj.find("li").width();
             viewSize = parseInt(obj.parent().width() / offset);
             if ((i - viewSize) > 0) {
                 obj.animate({
                     left: "-=" + offset
                 }, settings.slidetime, function() {
                     settings.leftBtn.removeClass("disabled");
                 });
                 i--;
                 if ((i - viewSize) == 0) {
                     settings.rightBtn.addClass("disabled");
                 }
             };
         };

         //左滑方法
         function leftSlide() {
             offset = obj.find("li").width();
             viewSize = parseInt(obj.parent().width() / offset);
             if ((i - viewSize) < obj.find("li").length - viewSize) {
                 ++i;
                 obj.animate({
                     left: "+=" + offset
                 }, settings.slidetime, function() {
                     settings.rightBtn.removeClass("disabled");
                 });
                 if ((i - viewSize) == obj.find("li").length - viewSize) {
                     settings.leftBtn.addClass("disabled");
                 }
             };
         };

         //事件绑定
         if (i - (obj.parent().width() / offset) <= 0) {
             settings.leftBtn.add(settings.rightBtn).hide();
         };
         settings.leftBtn.bind("click", leftSlide);
         settings.rightBtn.bind("click", rightSlide);
     };
 })(jQuery);

html:

 <div class="siteStyleChoose">
         <a href="javascript:;" id="left" class="btns disabled">left</a>
         <div class="siteStyleChooseCont">
             <ul class="fix" style="left: 0px;">
                 <li class="checkedThis">
                     <a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a>
                     <span class="checkIcon"></span>
                 </li>
                 <li>
                     <a href="javascript:;"><img src="../images/demo02.jpg" alt=""></a>
                 </li>
                 <li>
                     <a href="javascript:;"><img src="../images/demo03.jpg" alt=""></a>
                 </li>
                 <li>
                     <a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a>
                 </li>
                 <li>
                     <a href="javascript:;"><img src="../images/demo01.jpg" alt=""></a>
                 </li>
             </ul>
         </div>
         <a href="javascript:;" id="right" class="btns">right</a>
     </div>

css:

 /*siteStyleChooseCont*/
 .siteStyleChoose { position: relative;}
 .siteStyleChoose > .btns { position:absolute; height: 40px; width: 20px; z-index:; overflow: hidden; text-indent: -99em; background-image:url(../images/sliderbtnbg.gif); top: 100px;}
 .siteStyleChoose #left { left: 10px; background-position: left bottom;}
 .siteStyleChoose #right { right: 10px; background-position: right bottom;}
 .siteStyleChoose #left.disabled { background-position: left top;}
 .siteStyleChoose #right.disabled { background-position: right top;}
 .siteStyleChooseCont { position: relative; margin: 0 auto; width: 1000px; height: 230px; overflow: hidden;}
 .siteStyleChooseCont ul { position: relative; width: 999em;}
 .siteStyleChooseCont li { position: relative; float: left; width: 333px; padding-bottom:6px; text-align: center;}
 .siteStyleChooseCont li a { outline: none; background-color: #000; display: block; width: 313px; margin: 0 auto;}
 .siteStyleChooseCont li img { width: 313px;}
 .siteStyleChooseCont li img:hover,.siteStyleChooseCont li.checkedThis img { opacity: 0.7; filter:alpha(opacity=70);}
 .siteStyleChooseCont li .checkIcon { position:absolute; bottom:; left:; height: 80px; width: 84px; background: url(../images/check.png) top left no-repeat;}
 @media screen and (min-width:1440px) and (max-width:2560px){
     .siteStyleChooseCont { width: 1402px; height: 310px;}
     .siteStyleChooseCont li { width: 467px;}
     .siteStyleChooseCont li a { width: 413px;}
     .siteStyleChooseCont li img { width: 413px;}
     .siteStyleChoose > .btns { top: 140px;}
     .siteStyleChoose #left { left: 60px;}
     .siteStyleChoose #right { right: 60px;}
     }
 @media screen and (min-width:1680px) and (max-width:2560px){
     .siteStyleChoose #left { left: 50px;}
     .siteStyleChoose #right { right: 50px;}
     }
 .siteStyleChooseCont li a,.siteStyleChooseCont li img {
     -webkit-transition:all .3s linear;
     -moz-transition:all .3s linear;
     -ms-transition:all .3s linear;
     -o-transition:all .3s linear;
     transition:all .3s linear;
     }

干货已上，我们该如何使用呢？So Easy！

插件中我只设置了三个参数（左右按钮，滑动时间），照葫芦画瓢，如下：

 $(".siteStyleChooseCont").iocnSlider({leftBtn:$(".siteStyleChoose #left"),rightBtn:$(".siteStyleChoose #right"),slidetime:400});

当然，在插件之前别忘了调用jquery.js 哟！