判定 ie8

(function(){
    var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
            this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
            this.OS = this.searchString(this.dataOS) || "an unknown OS";
        },
        searchString: function (data) {
            for (var i=0;i<data.length;i++)    {
                var dataString = data[i].string;
                var dataProp = data[i].prop;
                this.versionSearchString = data[i].versionSearch || data[i].identity;
                if (dataString) {
                    if (dataString.indexOf(data[i].subString) != -1)
                        return data[i].identity;
                }
                else if (dataProp)
                    return data[i].identity;
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index == -1) return;
            return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
        },
        dataBrowser: [
            {
                string: navigator.userAgent,
                subString: "Chrome",
                identity: "Chrome"
            },
            {     string: navigator.userAgent,
                subString: "OmniWeb",
                versionSearch: "OmniWeb/",
                identity: "OmniWeb"
            },
            {
                string: navigator.vendor,
                subString: "Apple",
                identity: "Safari",
                versionSearch: "Version"
            },
            {
                prop: window.opera,
                identity: "Opera"
            },
            {
                string: navigator.vendor,
                subString: "iCab",
                identity: "iCab"
            },
            {
                string: navigator.vendor,
                subString: "KDE",
                identity: "Konqueror"
            },
            {
                string: navigator.userAgent,
                subString: "Firefox",
                identity: "Firefox"
            },
            {
                string: navigator.vendor,
                subString: "Camino",
                identity: "Camino"
            },
            {        // for newer Netscapes (6+)
                string: navigator.userAgent,
                subString: "Netscape",
                identity: "Netscape"
            },
            {
                string: navigator.userAgent,
                subString: "MSIE",
                identity: "Internet Explorer",
                versionSearch: "MSIE"
            },
            {
                string: navigator.userAgent,
                subString: "Gecko",
                identity: "Mozilla",
                versionSearch: "rv"
            },
            {         // for older Netscapes (4-)
                string: navigator.userAgent,
                subString: "Mozilla",
                identity: "Netscape",
                versionSearch: "Mozilla"
            }
        ],
        dataOS : [
            {
                string: navigator.platform,
                subString: "Win",
                identity: "Windows"
            },
            {
                string: navigator.platform,
                subString: "Mac",
                identity: "Mac"
            },
            {
                string: navigator.userAgent,
                subString: "iPhone",
                identity: "iPhone/iPod"
            },
            {
                string: navigator.platform,
                subString: "Linux",
                identity: "Linux"
            }
        ]

    };
    BrowserDetect.init();
    if(BrowserDetect.version <= 8 && BrowserDetect.browser.indexOf('Explorer') != -1 ){
        var browsehappy = document.createElement('div')
        browsehappy.className = 'browsehappy'
        browsehappy.innerHTML = 'You are using an outdated browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.'
        document.body.id = 'ie8'
        document.body.appendChild(browsehappy)
    }
})();

全屏輪播圖,方法一,其實並非優級,需引入 jquery.transit.js,圖片規格為四級:pc:1920 xx ;m:640 xx; ipad: 1366 1024 ; 1024 1366

function Eononslide(o) {
    if(!o.length){return}
    this.o = $(o);
    this.hd = this.o.find('.hd');
    this.hdul = this.hd.find('ul');
    this.hdli = this.hdul.find('li');
    this.bd = this.o.find('.bd');
    this.bdul = this.bd.find('ul');
    this.bdli = this.bdul.find('li');
    this.lastli = this.bdli.last().clone(true)
    this.firstli = this.bdli.first().clone(true)
    this.imgsrc = this.bdli.find('.bdimg').eq(0).attr('src');
    this.pn = this.o.find('.pn');
    this.pna = this.pn.find('a');
    this.lilen = this.bdli.length;
    this.num = 1;
    this.b = !0;
    this._t = null;
    this._t_m = null;
    this.downX = 0;
    this.dTime = 0;
    this.bdul.prepend(this.lastli).append(this.firstli);
    this.or = 4;//>766
    this.m = 1;
    this.etc = ''
    var at = ''
    this.options = {
        'autoPlay': true,
        'pn': false,
        'touch': true,
        'hd': true,
        'speed':300,
        'easing':'swing',
        callback:function(){}
    }
}
Eononslide.prototype = {
    constructor: Eononslide,
    init: function (opt) {
        $.extend(this.options, opt);
        this._cssUse()
        this._imgLoad();
        this.options.autoPlay && this._hd();
        this.options.autoPlay && this._autoPlay();
        this.options.touch && this._touchmove();
        this._resize();
        this._landport();
    },
    _changeW: function () {
        if (this.or == 0) {
            return $(window).width()
        }
        else if (this.or == 1) {
            return 768
        }
        else if (this.or == 2){
            return 1024
        }
        else if(this.or == 3){
            return 1366
        }
        else(this.or == 4)
        {
           // return 1920  //中心點縮進
            return $(window).width()
        }
    },
    _imgLoad: function () {
        var _this = this;
        var imgload = new Image();
        imgload.src = _this.imgsrc;
        _this._imgresizeW()
        imgload.onload = function () {
            typeof _this.options.callback == 'function' && _this.options.callback();
            setTimeout(function(){
                var _liallimg = _this.bdul.find('.bdimg')
                _liallimg.css('opacity',1)
                _this.options.pn && _this._pnRun();
            },300)
        }
    },
    _or: function () {
        if ($(window).width() < 766) {
            this.or = 0;  // <766
        }
        else if ($(window).width() == 768) {
            this.or = 1; // 766
        }
        else if($(window).width() == 1024){
            this.or = 2;
        }
        else if($(window).width() == 1366){
            this.or = 3;
        }
        else {
            this.or = 4;//>766
        }
        return this.or;
    },
    _imgresizeW: function () {
        var _this = this;
        _this._or()
        var _initL = $(window).width() - _this._changeW() < 0 ? $(window).width() - _this._changeW() : 0
        var _liali = _this.bdul.find('li')
        var j = {}
        var j2 = {}
        var j3 = {}
        j[at] = _initL / 2 + 'px'
        j["width"] = _this._changeW() + 'px'
        j2[at] = 'auto'
        j2["width"] = _this._changeW()
        j2['height'] = _this._changeW() * 1.32
        j3[at] = -_this._changeW()
        j3["width"] = (_this.lilen + 2) * _this._changeW()
        function _pl() {
            if ($(window).width() == 1024 && (window.orientation == 90 || window.orientation == -90)) {   //横
                if (_this.or == 2) {
                    _this.o.css({'height': '768px', 'max-height': '768px'})
                }
            }
            if ($(window).width() == 1024 && (window.orientation == 180 || window.orientation == 0)) {  //竖
                if (_this.or == 2) {
                    _this.o.css({'height': '1366px', 'max-height': '1366px'})
                }
            }
            if ($(window).width() == 1366 && (window.orientation == 90 || window.orientation == -90)) {  //横
                if (_this.or == 2) {
                    _this.o.css({'height': '1366px', 'max-height': '1366px'})
                }
            }
        }
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", _pl, false);
        if (_this.or == 0) {
            _liali.css(j2);
            _this.o.css({'height': Math.ceil(_this._changeW() * 1.33)})
        }
        if (_this.or == 1 || _this.or == 2 || _this.or == 3 || _this.or == 4) {
            _liali.css(j)
        }
        if (_this.or == 1) {
            _this.o.css({'height': '925px', 'max-height': '925px'})
        }

        if ($(window).width() == 768) {
            if (_this.or == 2) {
                _this.o.css({'height': '1024px', 'max-height': '1024px'})
            }
        }
        if ($(window).width() == 1024 && (window.orientation == 90 || window.orientation == -90)) { //横
            if (_this.or == 2) {
                _this.o.css({'height': '768px', 'max-height': '768px'})
            }
        }
        if ($(window).width() == 1024 && (window.orientation == 180 || window.orientation == 0)) {  //竖
            if (_this.or == 2) {
                _this.o.css({'height': '1366px', 'max-height': '1366px'})
            }
        }
        _pl()
        if(_this.or == 3 ){
            _this.o.css({'height': '1024px','max-height':'1024px'})
        }
        if (_this.or == 4) {
            _this.o.css({'height': Math.ceil(_this._changeW() / 2.33)})
        }
        _this.bdul.css(j3)
    },
    _hd: function () {
        var html = ''
        var _this = this;
        for (var i = 0; i < this.lilen; i++) {
            html += '<li></li>'
        }
        this.hdul.html(html)
        this.hdli = this.hdul.find('li')
        if (this.lilen > 0) {
            this.hdli.first().addClass('on')
        }
        this.hdli.on('click', function (e) {
            e.stopPropagation()
            $(this).addClass('on').siblings().removeClass('on')
            _this._hdRun($(this).index());
        })
        return this;
    },
    _hdRun: function (_index) {
        var _this = this;
        var j = {}
        j[at] = -(_index + 1) * this._changeW()
        this.bdul.stop(true, true)[_this.etc](j, function () {
            _this.num = _index + 1;
        })
    },
    _hdon: function () {
        this.hdli = this.hdul.find('li')
        var _linum = this.num - 1;
        if (_linum == this.lilen) {
            _linum = 0;
        }
        this.hdli.eq(_linum).addClass('on').siblings().removeClass('on')
    },
    _pnRun: function () {
        var _this = this;
        this.pna.eq(1).on('click', function (e) {
            e.stopPropagation()
            _this._Rrun()
        })
        this.pna.eq(0).on('click', function (e) {
            e.stopPropagation()
            _this._Lrun()
        })
        this.o.on({
            'mouseenter': function () {
                _this.pn.show('fast')
            },
            'mouseleave': function () {
                _this.pn.hide('fast')
            }
        })
        _this.pn.css({'opacity':1})
        return this;
    },
    _Rrun: function () {
        var _this = this;
        if (this.b) {
            this.num++;
            this.b = !1
            var j = {}
            var j2 = {}
            j[at] = -_this._changeW() * this.num;
            j2[at] = - _this._changeW();
            this.bdul[_this.etc](j, _this.options.speed,_this.options.easing, function () {
                if (_this.num == _this.lilen + 1) {
                    _this.bdul.css(j2)
                    _this.num = 1
                }
                _this.b = !0;
                _this.m = 1;
            })
            _this._hdon()
        }
    },
    _Lrun: function () {
        var _this = this;
        if (this.b) {
            this.num--;
            this.b = !1;
            var j = {}
            var j2 = {}
            j[at] = - this._changeW() * this.num;
            j2[at] = -_this._changeW() * _this.lilen
            this.bdul.stop(true)[_this.etc](j, _this.options.speed,_this.options.easing, function () {
                if (_this.num == 0) {
                    _this.bdul.css(j2)
                    _this.num = _this.lilen;
                }
                _this.b = !0;
                _this.m = 1;
            })
            _this._hdon()
        }
    },
    _autoPlay: function () {
        var _this = this;
        this._t = setInterval(function () {
            _this._Rrun()
        }, 8000)
        clautoPlay(_this.bdul);
        clautoPlay(_this.hd);
        clautoPlay(_this.pn);
        function clautoPlay(obj) {
            obj.on({
                'mouseenter': function () {
                    clearInterval(_this._t)
                    _this._t = null;
                },
                'mouseleave': function () {
                    clearInterval(_this._t)
                    _this._t = setInterval(function () {
                        _this._Rrun()
                    }, 8000)
                }
            })
        }
    },
    _touchmove: function () {
        var _this = this;
        var xx,yy,XX,YY,swipeX,swipeY;
        _this.bdul.on('touchstart', function (e) {
            xx = e.originalEvent.changedTouches[0].pageX;
            yy = e.originalEvent.changedTouches[0].pageY;
            swipeX = true;
            swipeY = true;
            clearInterval(_this._t);
            var touch = e.originalEvent.changedTouches[0];
            _this.downX = touch.pageX;
            if (_this.m) {
                var initLeft = parseInt(_this.bdul.css(at))
                _this.m = 0;
            }
            _this.dTime = Date.now();
            _this.bdul.on('touchmove', function (e) {
                XX = e.originalEvent.changedTouches[0].pageX;
                YY = e.originalEvent.changedTouches[0].pageY;
                var touch = e.originalEvent.changedTouches[0];
                var disX = touch.pageX - _this.downX;
                var j = {}
                var j2 = {}
                j[at] = initLeft + disX
                j2[at] = initLeft
                if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) {
                    e.stopPropagation();
                    e.preventDefault();
                    swipeY = false ;
                    if (Math.abs(disX) > 20) {
                        _this.bdul.css(j)
                    }
                    else {
                        _this.bdul.css(j2)
                    }
                }
                else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) {
                    swipeX = false;
                }

            });
            _this.bdul.on('touchend', function (e) {
                XX = e.originalEvent.changedTouches[0].pageX;
                YY = e.originalEvent.changedTouches[0].pageY;
                _this._cssUse()
                var touch = e.originalEvent.changedTouches[0];
                var j = {}
                j[at] = initLeft
                if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) {
                    e.stopPropagation();
                    e.preventDefault();
                    swipeY = false ;
                if (touch.pageX < _this.downX) {
                    if (Date.now() - _this.dTime < 200 && Date.now() - _this.dTime > 30) {
                        _this._Rrun();
                    }
                    else {
                        _this.bdul[_this.etc](j, _this.options.speed,_this.options.easing, function () {
                            _this.m = 1;
                        })
                    }
                }
                else {
                    if (Date.now() - _this.dTime < 200 && Date.now() - _this.dTime > 30) {
                        _this._Lrun();
                    }
                    else {
                        _this.bdul[_this.etc](j,  _this.options.speed,_this.options.easing, function () {
                            _this.m = 1;
                        })
                    }
                }
                _this.bdul.off('touchmove');
                _this.bdul.off('touchend');
                }
                else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) {
                    swipeX = false;
                }
            })
        })
    },
    _resize: function () {
        var _this = this;
        $(window).resize(function () {
            _this._imgresizeW()
        })
    },
    _landport:function(){
        var _this = this;
        var _mq = window.matchMedia("(orientation: portrait)");
        _mq.addListener(function (m) {
            if (m.matches) {
                _this._imgresizeW()
            }
            else {
                _this._imgresizeW()
            }

        });
    },
    _cssUse:function(){
        if(!!$.support.transition){
            this.etc = 'transition'
            at = 'x'
            this.options.speed = '300'
            this.options.easing = 'linear'
        }
        else{
            this.etc = 'animate'
            at = 'left'
        }
    }
}
<div class="i-banner">
<div class="i-banner-slide">
    <div class="hd">
        <ul></ul>
    </div>
    <div class="bd">
        <ul><li><img class='bdimg' src='1.png' /><a href='#' class='i-banner-bda-1'></a></li></ul>
        <ul><li><img class='bdimg' src='2.png' /></li></ul>
        <ul><li><img class='bdimg' src='3.png' /></li></ul>
    </div>
    <div class="pn">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>
</div>
.i-banner-slide{position:relative;min-height:300px}
.i-banner-slide .bd ul{position:absolute;left:0;margin:0;padding:0;}
.i-banner-slide .bd li{list-style:none;float:left;margin:0;padding:0;background:url(/img/loading.gif) center center no-repeat}
.i-banner-slide .bd .bdimg{position:relative;left:0;width:100%;vertical-align:top;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-webki-transition:opacity .3s;-moz-transition:opacity .3s;-ms-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s;min-width:320px}
.i-banner-slide .hd{position:absolute;width:100%;text-align:center;bottom:20px;z-index:1}
.i-banner-slide .hd li{cursor:pointer;display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 9px;background-color:#646464;border:1px solid #646464}
.i-banner-slide .hd .on{border:1px solid #fff;background-color:transparent}
.i-banner-slide .pn{font-size:28px;opacity:0;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;transition:.5s;}
.i-banner-slide .pn a{display:inline-block;text-decoration:none;position:absolute;top:50%;margin:-57px auto auto;outline:0;width:55px;height:114px;border:none;overflow:hidden;background:no-repeat transparent;cursor:pointer;color:#FFF;line-height:114px}
.cart_empty a:hover,.footer a:hover{text-decoration:underline}
.h-nav-cart-c{display:none;position:relative}
.i-banner-slide .pn a:nth-of-type(1):after,.i-banner-slide .pn a:nth-of-type(2):after{content:'';border-bottom:1px solid #797979;width:50px;height:50px;top:50%;margin-top:-25px;position:absolute}
.i-banner-slide .pn a:nth-of-type(1){left:0}
.i-banner-slide .pn a:nth-of-type(1):after{border-left:1px solid #797979;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);left:18px}
.i-banner-slide .pn a:nth-of-type(2){right:0}
.i-banner-slide .pn a:nth-of-type(2):after{border-right:1px solid #797979;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);right:18px}
.i-banner-slide .pn a:hover{outline:0}
.i-banner-slide .bd li{position:relative}
.i-banner-slide {width:100%;position:relative;}
.i-banner-slide .bd .bdimg{width:100%}
.i-banner-slide .pn{display:none!important}
.i-banner-slide .bd li{position:relative;height:auto}

banner可點擊區域計算:

        function ibannerImgWS(o, json) {
            var ibliWidth = $('.i-banner-slide').find('.bd').find('li').width()
            var obj = $(o);
            var iscale = 1;
            var ietc = ''
            if ($(window).width() < 766) {
                ietc = 'm'
                iscale = ibliWidth / 640
            }
            else {
                if (navigator.userAgent.indexOf("iPad") != -1 && ($(window).width() == 768 || 1024 || 1366)) {
                    if ((window.orientation == 180 || window.orientation == 0)) {
                        if ($(window).width() == 768) {
                            iscale = 768 / 1024;
                        }
                        if ($(window).width() == 1024) {
                            iscale = 1;
                        }
                        ietc = 'ipad-p'
                    }
                    if ((window.orientation == 90 || window.orientation == -90)) {
                        if ($(window).width() == 1024) {
                            iscale = 1024 / 1366;
                        }
                        if ($(window).width() == 1366) {
                            iscale = 1;
                        }
                        ietc = 'ipad-l'
                    }
                }
                else {
                    ietc = 'pc'
                    iscale = ibliWidth / 1920;
                }
            }
            if (!json[ietc]) {
                return false;
            }
            obj.css({
                'position': 'absolute',
                'left': Math.ceil(json[ietc][0] * iscale),
                'top': Math.ceil(json[ietc][1] * iscale),
                'width': Math.ceil(json[ietc][2] * iscale),
                'height':Math.ceil(json[ietc][3] * iscale)
            })
        }
    })();

結合調用

        var elslide = new Eononslide('.i-banner-slide');
        elslide.init({
            'pn': true,
            callback: function () {
                ibannerImgWS('.i-banner-bda-1', {
                    'pc': [left,top,width,height],
                    'm': [left,top,width,height],
                    'ipad-p': [left,top,width,height],
                    'ipad-l': [left,top,width,height],
                })
            }
        })

touch方向修正

function stopPro(obj){
    if(!obj){return;}
    var xx,yy,XX,YY,swipeX,swipeY ;
    _on(obj,'touchstart',function(event){
        var event = event || window.event;
        xx = event.targetTouches[0].screenX ;
        yy = event.targetTouches[0].screenY ;
        swipeX = true;
        swipeY = true ;
    })
    _on(obj,'touchmove',function(event){
        var event = event || window.event;
        XX = event.targetTouches[0].screenX ;
        YY = event.targetTouches[0].screenY ;
        if (swipeX && Math.abs(XX - xx) - Math.abs(YY - yy) > 0) //左右
        {
            event.stopPropagation();
            event.preventDefault();
            swipeY = false ;
        }
        else if (swipeY && Math.abs(XX - xx) - Math.abs(YY - yy) < 0) { //上下
            swipeX = false ;
        }
    })
    function _on(obj, ev, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(ev, fn, false);
        } else {
            obj.attachEvent('on' + ev, function() {
                fn.call(obj);
            });
        }
    }
}

圖片預加載

jQuery.reloadimg = function () {
    var objImg = [];
    for (var i = 0; i < arguments.length; i++) {
        objImg[i] = new Image();
        objImg[i].src = arguments[i];
    }
};

// $.reloadimg('1.jpg','2.jpg')