jquery水平方向平铺焦点图

  jquery实现的水平方向平铺占满显示视窗效果。当视窗大小改变时,自动变换焦点图显示的区域。目前焦点图支持2个方向的滚动,水平和垂直滚动。

 

  jquery水平方向平铺焦点图插件测试代码如下

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水平方向平铺焦点图
评论(0)Web开发网
阅读(164)喜欢(0)不喜欢(0)JavaScript/Ajax