jQuery自适应容器焦点图,兼容移动端

  jQuery自适应容器焦点图,兼容移动端浏览器,支持移动端的touch触碰事件滑动切换图片。效果如下

jQuery自适应容器焦点图,兼容移动端

  兼容移动端的焦点图,只要放到指定的容器中,焦点图会自动水平填满容器宽度,移动端显示只需要控制指定容器的宽度,不需要关心焦点图显示,会自动填满此容器宽度,高度等比计算得出,图片不会变形。

  jQuery自适应容器焦点图,兼容移动端浏览器源代码和使用说明如下

PC端浏览器可以更改窗体大小查看自适应效果,移动端开启自动转屏,然后切换屏幕横竖方向测试。

<!doctype html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
<style>
    .bbSlider{width:100%;height:300px;overflow:hidden;position:relative}/*初始化300高度,代码会依据第一张图片等比缩放高度重置容器的高度,这样多张图片不会增加页面长度*/
    .bbSlider img{width:100%;z-index:2;height:100%;border:none;display:block}
    .bbSlider a{display:block;width:100%;position:relative}
    .bbSlider a.pre,.bbSlider a.next{z-index:999;display:none;width:auto;padding:0 10px;position:absolute;line-height:30px;margin-top:-15px;filter:alpha(opacity=70);opacity:.7;background:#000;color:#fff;top:50%}
    .bbSlider a.pre{left:0}
    .bbSlider a.next{right:0}
    .bbSlider span{position:absolute;bottom:0;left:0;width:100%;background:#000;filter:alpha(opacity=70);opacity:.7;color:#fff;line-height:30px;text-align:center}
    .bbSlider div.scrollItem{width:100%;height:100%;overflow:hidden;position:relative}
    .bbSlider div.item{width:9999999px;height:100%}
    .bbSlider img.hidden{height:auto;visibility:hidden}
    .bbSlider img.hidden{height:auto;visibility:hidden}
    .bbSlider img.hidden{height:auto;visibility:hidden}
</style>
<title>jQuery自适应容器焦点图,兼容移动端浏览器</title>
<div style="max-width:800px;margin:0px auto">
    <div class="bbSlider">
        <a href="#1"><img src="http://glgangyu.com/upload/20160902/110949074.jpg" /><span>文字描述1</span></a>
        <a href="#2"><img src="http://glgangyu.com/upload/20160728/210728434.jpg" /><span>文字描述2</span></a>
        <a href="#3"><img src="http://glgangyu.com/upload/20160728/210736188.jpg" /><span>文字描述3</span></a>
       
    </div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    //power by showbo,http://www.w3dev.cn ,please keep this
    //type参数说明,默认left(从右边往左边滚动),top(从下往上滚动),fade(淡入淡出,IE8-有问题,淡入淡出效果出不来,直接显示图片)
    //delay:动画间隔,默认6s
    //aDelay:动画效果时间,默认0.5s
    $.fn.bbSlider = function (type,delay,aDelay) {
        type = type || 'left';
        delay = (delay || 6) * 1000;
        aDelay = (aDelay || 0.5) * 1000;
        return this.each(function () {
            function resetContainerHeight() {
                h = imgFirst.offsetHeight;
                w = imgFirst.offsetWidth;
                step = type == 'top' ? h : w;
                container.add(imgs).add(scrollItem).css('height', h);
                if (type != 'fade') {
                    if (type == 'left') as.css('width', w);
                    scrollItem.attr(attr, index * step);
                }
            }
            function initDomStructure() {
                imgFirst = imgs.eq(0).clone().addClass('hidden').appendTo(container)[0];//用来获取容器更改大小时获取高度用的
                
                $(window).resize(resetContainerHeight);//这个可以不加,方便PC端览器缩小窗口看效果测试用的
                if (type == 'fade') {
                    as.eq(0).css('z-index',3).end().filter(':gt(0)').css({ 'z-index': 1, opacity: 0 });
                    as.css({ position: 'absolute', left: 0, top: 0 });
                }
                else {
                    scrollItem = $('<div class="scrollItem"></div>');
                    scrollItem.prependTo(container);
                    if (type == 'left') { var item = $('<div class="item"></div>'); scrollItem.append(item); item.append(as.css('float', 'left')); }
                    else scrollItem.append(as);
                }
                resetContainerHeight();
                if (l > 1) {
                    var prenext = $('<a href="#" class="pre">上一张</a><a href="#" class="next">下一张</a>');
                    container.append(prenext);
                    if ($.fn.bbSlider.supportTouch) prenext.css('display', 'block');//触屏设备没有mouseover/mouseout事件,直接显示上下操作
                    prenext.click(function () {
                        animate(this.className == 'pre');
                        return false
                    });
                    if (!$.fn.bbSlider.supportTouch) container.mouseenter(function () { clearInterval(timer); prenext.show() }).mouseleave(function () { timer = setInterval(animate, delay); prenext.hide() }).trigger('mouseleave');
                }
            }
            function animate(isPre) {
                if (type == 'fade') {
                    next = index + (isPre ? -1 : 1); if (next >= l) next = 0; else if (next < 0) next = l - 1;                    
                    as.eq(next).css({ 'z-index': 2, opacity: 100, display: 'block' });
                    as.eq(index).css({ 'z-index': 3 }).animate({ opacity: 0 }, aDelay, function () { $(this).css({ 'z-index':1 }); });
           
                    if (isPre === true) index--; else index++;
                    if (index >= l) index = 0; else if (index < 0) index = l - 1;
                }
                else {
                    if (isPre === true) index--; else index++;
                    if (index >= l) index = 0; else if (index < 0) index = l - 1;
                    aCfg[attr] = index * step;
                    scrollItem.animate(aCfg, aDelay);
                }
            }
            var container = $(this), imgs = $('img', this), imgFirst = imgs[0], w, h, as = imgs.parent(), l = imgs.length, timer, index = 0, next,scrollItem
                , attr = { top: 'scrollTop', left: 'scrollLeft' }[type] || 'opacity', step, aCfg = {};
            if ($.fn.bbSlider.supportTouch) container.data('type', type);
            //第一张图片未加载完毕注册load事件,因为宽度100%,高度会等比缩放,需要加载完毕才获取到等比
            if (imgFirst.complete !== true && imgFirst.readyState !== 'complete') {
                imgs.eq(0).load(initDomStructure);
            } else initDomStructure();//缓存中加载的,不响应load事件,可以直接初始化DOM结构           
        });
    };
 
    (function () {//移动端touch触摸支持
        try { 
            document.createEvent("TouchEvent");
            $.fn.bbSlider.supportTouch = true;
            //是否触碰了上下一张链接
            $.fn.bbSlider.isPreNext = function (el) { return el.tagName == 'A' && /^[上下]一张$/.test(el.innerHTML); };
            var x, y, target = false;

            document.addEventListener('touchstart', function (e) {
                target = false;
                var t = e.touches[0];
                //是否触碰上下一张链接
                if ($.fn.bbSlider.isPreNext(t.target)) { $(t.target).trigger('click'); e.preventDefault(); return; }
                target = $(t.target).closest('div.bbSlider')[0];
                if (target) e.preventDefault();
                x = t.pageX; y = t.pageY;
            }, false);
            document.addEventListener('touchend', function (e) {//触碰结束判断方向,到底是切换到上一张还是下一张
                if (!target) return;
                target = $(target);
                var t = e.changedTouches[0], v = target.data('type') == 'top' ? t.pageY - y : t.pageX - x;
                if (v != 0) $(target).find('a.' + (v < 0 ? 'next' : 'pre')).trigger('click');
            }, false);
        } catch (e) { }
    })();
    $('div.bbSlider').bbSlider('');
</script>

 


原创文章,转载请注明出处:jQuery自适应容器焦点图,兼容移动端
评论(0)Web开发网
阅读(393)喜欢(0)不喜欢(0)JavaScript/Ajax