简单的图片滑动效果插件 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: 9; 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: 0; left: 0; height: 80px; width: 84px; background: url(../images/check.png) top left no-repeat;}
@media screen and (min-1440px) and (max-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-1680px) and (max-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 哟！