简单的图片滑动效果插件 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-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 哟！