jquery水平方向平铺焦点图
jquery实现的水平方向平铺占满显示视窗效果。当视窗大小改变时，自动变换焦点图显示的区域。目前焦点图支持2个方向的滚动，水平和垂直滚动。
jquery水平方向平铺焦点图插件测试代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>jquery水平方向平铺焦点图插件</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
body{margin:0px;padding:0px}
.slider{position:relative}
.sliderContent{height:500px;width:100%;overflow:hidden;}
.sliderItem{height:100%;overflow: hidden;width:100%;background:none no-repeat center 0px;}
.sliderBtnWrapper{height:69px;margin:0 auto;width:100%;position:absolute;top:50%;margin-top:-35px}
.sliderBtnPre,.sliderBtnNext{display: block;height:69px;position:absolute;text-indent:-9999em;width:69px;z-index:3;background:url(/demo/h-slider/p-btn.png) no-repeat;outline:none}
.sliderBtnPre{left:50px}
.sliderBtnNext{background-image:url(/demo/h-slider/n-btn.png);left:inherit;right:50px;}</style>
<div class="slider" id="slider">
<div class="sliderContent">
<div class="sliderItem" style="background-image:url(/demo/h-slider/1.jpg)"></div>
<div class="sliderItem" style="background-image:url(/demo/h-slider/2.jpg)"></div>
<div class="sliderItem" style="background-image:url(/demo/h-slider/3.jpg)"></div>
<div class="sliderItem" style="background-image:url(/demo/h-slider/4.jpg)"></div>
</div>
</div>
<script>
(function ($) {
$.fn.slider = function (cfg) {
cfg = $.extend({//焦点图全屏默认配置
delay: 3000, //自动播放时间间隔，单位毫秒
animateDelay: 500, //切换动画效果时间，单位毫秒
position: 1, //滚动方向 1：垂直滚动 2：水平滚动
height: 500//焦点图高度，默认500，你的图片背景高度不是500，需要配置这个选项修正高度
}, cfg);
cfg.scroll = cfg.position == 2 ? 'scrollLeft' : 'scrollTop';
return this.each(function () {
var btn = $('<div class="sliderBtnWrapper"><a href="javascript:void(0);" class="sliderBtnPre">Previous Slide</a><a href="javascript:void(0);" class="sliderBtnNext">Next Slide</a></div>').appendTo(this).find('a'),
sliderContent = $(this).find('div.sliderContent'), itemContainer, step = cfg.height, items = sliderContent.find('div.sliderItem'), itemNum = items.length, total = (itemNum - 1) * step
, param = {}, timer, nowItem, auto = true;
if (cfg.position == 2) {
$(window).resize(function (e, p) {
if (p == 'init') { itemContainer = $('<div></div'); sliderContent.append(itemContainer.css('height', '100%')); itemContainer.append(items); }
else {
sliderContent.stop(); //停止动画，以便重新计算要移动的距离
nowItem = Math.ceil(param[cfg.scroll] / step);
}
step = Math.max(document.body.offsetWidth, document.documentElement.offsetWidth);
total = (itemNum - 1) * step;
itemContainer.css('width', itemNum * step);
items.css({ width: step, float: 'left' });
if (p != 'init') {
param[cfg.scroll] = nowItem * step;
sliderContent.attr(cfg.scroll, param[cfg.scroll]); //直接设置滚动长度显示要显示的图片，不用动画，应为动画的余下时间懒得算了，有兴趣自己计算
startTimer();
}
}).trigger('resize', 'init');
}
sliderContent.css('height', cfg.height);
param[cfg.scroll] = 0;
btn.click(function () { animate(this.className == 'sliderBtnPre' ? -1 : 1) });
function startTimer() {
clearTimeout(timer);
if (auto) timer = setTimeout(function () { animate(1) }, cfg.delay);
}
function animate(dir) {
console.log(param);
param[cfg.scroll] += step * dir;
if (param[cfg.scroll] > total) param[cfg.scroll] = 0;
else if (param[cfg.scroll] < 0) param[cfg.scroll] = total;
sliderContent.animate(param, cfg.animateDelay, function () { startTimer(); });
}
$(this).mouseenter(function () { auto = false; startTimer(); }).mouseleave(function () { auto = true; startTimer(); });
startTimer();
});
};
})(jQuery);
$(function () {
$('#slider').slider({ position: 2 });
});
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery水平方向平铺焦点图