nie.config.copyRight.setGray();var nieCarousel = (function ($) {    var defaultOptions = {        children: ‘.center-slide-box a‘,        nextBtn: ‘.slide-next‘,        prevBtn: ‘.slide-prev‘,        navList:‘.center-slide-nav li‘,        box:‘.center-slide‘,        resNav:‘.center-slide-res-nav li‘,        autoPlay: true    }    var current = 0;    var tempCurrent=0;//for click event    var transfer = false;    var nieCarousel = function (box, options) {        this.options = $.extend({}, defaultOptions, options);        this._$children = $(this.options.children);        this._$nav = $(this.options.navList);        this._$resNav=$(this.options.resNav);        this._num = this._$children.length;        this._autoPlay=this.options.autoPlay;        this._$box=$(this.options.box);        this.init();    }    nieCarousel.prototype.initNext = function () {        var self = this;        var num = self._num;        var $ele = $(self.options.nextBtn);        function showNext() {            if (!transfer) {                transfer = true;                if(current+1==self._num){                    self._$children.eq(0).css({left:‘100%‘})                }                self._$children.eq(current % num).animate({                    left: ‘-100%‘                }, 300);                self._$children.eq(++current % num).animate({                    left: ‘0%‘                }, 300, function () {                    transfer = false;                    self._$children.eq((current-1)%num).css({‘left‘:‘-100%‘});                    self._$children.eq((current+1)).css({‘left‘:‘100%‘})                });                navTransfer();            }        }        function navTransfer(){            current%num==0?current=0:‘‘;            $(‘.center-slide-nav li .default‘).eq(current-1).animate({                top:‘0‘            }).parent().removeClass(‘on‘);            $(‘.center-slide-nav li .default‘).eq(current).animate({                top:‘-100%‘            }).parent().addClass(‘on‘);            self._$resNav.eq(current).addClass(‘on‘);            self._$resNav.eq(current-1).removeClass(‘on‘);            if(self.setTimeOutId&&!($.browser.msie&& $.browser.version==‘6.0‘)){                $(‘.progress-inner‘).removeClass(‘progress-loading‘);                $(‘.progress-inner‘).eq((current+1)%self._num).addClass(‘progress-loading‘);            }        }        $ele.click(showNext);    }    nieCarousel.prototype.initPrev = function () {        var self = this;        var num = self._num;        var $ele = $(self.options.prevBtn);        function showPrev() {            if (!transfer) {                transfer = true;                if(current%self._num==0){                    self._$children.eq(-1).css({left:‘-100%‘})                }                self._$children.eq(current % num).animate({                    left: ‘100%‘                }, 300);                self._$children.eq(--current % num).animate({                    left: ‘0%‘                }, 300,function(){                    transfer=false;                    self._$children.eq((current-1)%num).css({‘left‘:‘-100%‘});                    self._$children.eq((current+1)%num).css({‘left‘:‘100%‘})                });                navTransfer();                current%num==0?current=0:‘‘;            }        }        function navTransfer(){            self._$nav.find(‘.default‘).eq(current+1).animate({                top:‘0‘            }).parent().removeClass(‘on‘);            self._$nav.find(‘.default‘).eq(current).animate({                top:‘-100%‘            }).parent().addClass(‘on‘);            self._$resNav.eq(current).addClass(‘on‘);            self._$resNav.eq(current+1).removeClass(‘on‘);        }        $ele.click(showPrev);    }    nieCarousel.prototype.initNav = function () {        var self = this;        function setNavClickFn(index){            tempCurrent=current;            current=index;            var leftPos;            if(!transfer&&(tempCurrent!=current)){                transfer=true;                self._$nav.eq(tempCurrent).removeClass(‘on‘);                self._$resNav.eq(tempCurrent).removeClass(‘on‘);                self._$nav.eq(tempCurrent).find(‘.default‘).animate({                    top:0                })                $(this).addClass(‘on‘);                current>tempCurrent?leftPos=‘-100%‘:leftPos=‘100%‘;                current>tempCurrent?self._$children.eq(current).css(‘left‘,‘100%‘):self._$children.eq(current).css(‘left‘,‘-100%‘);                self._$children.eq(tempCurrent).animate({                    left:leftPos                })                self._$children.eq(current).animate({                    left:0                },function(){                    transfer=false;                    self._$children.not(current).each(function(index){                        if(index>current){                            $(this).css({left:‘100%‘})                        }else{                            $(this).css({left:‘-100%‘})                        }                        if(index==current){                            $(this).css(‘left‘,‘0‘)                        }                    })                })            }        }        self._$nav.each(function (index) {            $(this).hover(function () {                self._$nav.not(‘.on‘).find(‘.default‘).stop().animate({                    top:‘0‘                })                self._$nav.eq(index).find(‘.default‘).stop().animate({                    top:‘-100%‘                })            },function(){                !$(this).hasClass(‘on‘)&&$(this).find(‘.default‘).animate({                    top:‘0‘                })            })            $(this).click(function(){                setNavClickFn.call(this,index);            });        })        self._$resNav.each(function(index){            $(this).click(function(){                setNavClickFn.call(this,index);            })        })    }    nieCarousel.prototype.autoPlay = function () {        var self=this;        this.setTimeOutId=setInterval(function(){            $(self.options.nextBtn).trigger(‘click‘)        },3000)    }    nieCarousel.prototype.hoverEvent=function(){        var self=this;        self._$box.hover(function(){            clearInterval(self.setTimeOutId);            self.setTimeOutId=0;  //watch if user click or auto play            $(‘.progress-inner‘).removeClass(‘progress-loading‘);        },function(){            self._autoPlay&&self.autoPlay();            self._autoPlay&&!($.browser.msie&& $.browser.version==‘6.0‘)&&$(‘.progress-inner‘).eq((current+1)%self._num).addClass(‘progress-loading‘);        })    }    nieCarousel.prototype.initDefault=function(){        var self = this;        var isFirst = false;        this._$children.each(function (index) {            index == 0 ? isFirst = true : isFirst = false;            (!isFirst) && $(this).css({                left: ‘100%‘            })        });        this._$nav.find(‘.num‘).each(function(i){            $(this).html(i+1);        })        this._$nav.eq(0).addClass(‘on‘).find(‘.default‘).css(‘top‘,‘-100%‘);        this._autoPlay&&!($.browser.msie&& $.browser.version==‘6.0‘)&&$(‘.progress-inner‘).eq(1).addClass(‘progress-loading‘);    }    nieCarousel.prototype.init = function () {        this.initDefault();        this.initNext();        this.initPrev();        this.initNav();        this._autoPlay&&this.autoPlay();        this.hoverEvent();    }    return nieCarousel;})(jQuery);$(function () {    //set default speeds !override $.fx.speeds._default    $.fx.speeds._default=300;    var carousel = new nieCarousel(‘.center-slide-box‘, {        children: ‘.center-slide-box a‘,        nextBtn: ‘.slide-next‘,        prevBtn: ‘.slide-prev‘,        navList:‘.center-slide-nav li‘,        autoPlay:true    });    /**     * window resize set height     */    $(window).resize(function(){            if($(window).width()<1000){                $(‘.center-slide‘).height($(‘.center-slide‘).width()*0.55);                $(‘.center-news‘).height($(‘.center-slide‘).height()+1);            }else{                $(‘.center-news‘).height(405);                $(‘.center-slide‘).height(406);            }            if($(window).width()<768){            }    })    if($(window).width()<1000){        $(‘.center-slide‘).height($(‘.center-slide‘).width()*0.55);        $(‘.center-news‘).height($(‘.center-slide‘).height()+1);    }else{        $(‘.center-news‘).height(405);        $(‘.center-slide‘).height(406);    }    //entrance-list-res    (function(){        var $ele= $(‘.entrance-list-ul li:not(.entrance-list-btn)‘),            length=$ele.length,            next=true,            prev=false,            status=length%9;  //for 768        function ipadEntrance(){            next&&(function(){                $(‘.entrance-list-next‘).removeClass(‘disabled‘);                $(‘.entrance-list-prev‘).addClass(‘disabled‘);                $ele.removeClass(‘res-hide‘);                for(var index=-status;index<0;index++){                    $ele.eq(index).addClass(‘res-hide‘);                }            }());            prev&&(function(){                $(‘.entrance-list-prev‘).removeClass(‘disabled‘);                $(‘.entrance-list-next‘).addClass(‘disabled‘);                $ele.removeClass(‘res-hide‘);                for(var index=0;index<status;index++){                    $ele.eq(index).addClass(‘res-hide‘);                }            }());        }        ipadEntrance();        $(‘.entrance-list-btn‘).click(function(){            next=!next;            prev=!prev;            ipadEntrance();        })    })();    var entranceScroll=(function(){        var $ele=$(‘.entrance-list-ul li:not(.entrance-list-btn)‘),            $next=$(‘.entrance-list-next‘),            $prev=$(‘.entrance-list-prev‘),            $eleNav=$(‘.entrance-list-nav a‘),            length=$ele.length,            nowCount= 0,            groups=Math.ceil(length/4),            cls=0;        for(var i=0;i<length;i++){            $ele.eq(i).addClass(‘res-group-‘+cls);            (i+1)%4==0?++cls:‘‘;            i>3?‘‘:$ele.eq(i).addClass(‘res-group-show‘);        }        function init(){            $next.click(function(){                var current=(++nowCount)%groups,                    domEle=$(‘.res-group-‘+current);                $ele.removeClass(‘res-group-show‘);                domEle.addClass(‘res-group-show‘);                $eleNav.removeClass(‘current‘).eq(current).addClass(‘current‘);                nowCount%groups==0?nowCount=0:‘‘;            })            $prev.click(function(){                var current=(--nowCount)%groups,                    ii=current<0?(current+groups):current                    domEle=$(‘.res-group-‘+ii);                $ele.removeClass(‘res-group-show‘);                domEle.addClass(‘res-group-show‘);                $eleNav.removeClass(‘current‘).eq(current).addClass(‘current‘);                nowCount%groups==0?nowCount=0:‘‘;            })            $eleNav.each(function(i){                $(this).click(function(){                    nowCount=i;                    $eleNav.removeClass(‘current‘).eq(i).addClass(‘current‘);                    var  domEle=$(‘.res-group-‘+i);                    $ele.removeClass(‘res-group-show‘);                    domEle.addClass(‘res-group-show‘);                })            })        }        return{            init:init        }    }())    entranceScroll.init();    //mobile-list-res added by mrF 2014-5-8    var mgameLength = $(‘.mgame-list-pic‘).find(‘li‘).length,len;    mgameLength%3 == 0?len = parseInt(mgameLength/3):len = parseInt(mgameLength/3)+1    for(var i = 0;i<len;i++){        $(‘.mgame-list-pic-nav‘).append(‘<a class="mgame-list-pic-nav-tab" href="javascript:void(0)"><div class="mgame-list-pic-nav-tab-bar"></div></a>‘);    }    $(‘.mgame-list-pic-nav-tab‘).eq(0).addClass(‘current‘);    $(‘.mgame-list-pic-nav-tab‘).hover(function(){        var num = $(this).index();        $(this).addClass(‘current‘);        $(this).siblings().stop(false,true).removeClass(‘current‘);        $(‘.mgame-list-pic‘).stop().animate({‘left‘:num*(-1017)+‘px‘},250);    })})

滚动HTML代码

<section class="center-slide"><div class="center-slide-box"><a href="http://gad.netease.com/gad/access?project_id=1035062&s=sddbS%2B1KjKSIhVkdV3OZ4D8ooB8%3D&code_type=1" target="_blank"><img src="http://img.nie.163.com/images/2014/7/4/2014-07-04_464367.jpg" alt="实况俱乐部 嘉年华"/></a><a href="http://txhd.163.com/" target="_blank"><img src="http://img.nie.163.com/images/2014/7/7/2014-07-07_464993.jpg" alt="天下HD 凶萌开测"/></a><a href="http://xy3.163.com/" target="_blank"><img src="http://img.nie.163.com/images/2014/7/9/2014-07-09_465419.jpg" alt="新大话3 全新资料片"/></a><a href="http://gad.netease.com/gad/access?project_id=1034900&s=GnBeQHwpvPVXwpCUPlaoUW1MmC0%3D&code_type=1" target="_blank"><img src="http://img.nie.163.com/images/2014/7/4/2014-07-04_464161.jpg" alt="忍者必须死2 新版本"/></a><a href="http://yzr.163.com" target="_blank"><img src="http://img.nie.163.com/images/2014/6/20/2014-06-20_460757.jpg" alt="影之刃 终极封测"/></a><span class="slide-next"></span><span class="slide-prev"></span></div><ul class="center-slide-nav"><li><a href="javascript:;" class="default"><span class="num">1</span><div class="progress"><div class="progress-inner"></div></div><span class="title">实况俱乐部 嘉年华</span></a><a href="javascript:;" class="hover"><div class="mask"></div><img src="http://nie.163.com/banner/13v1/nie_0704sk.jpg"><div class="content"><p>实况俱乐部 嘉年华</p><span>查看详情<i></i></span></div></a></li><li><a href="javascript:;" class="default"><span class="num">1</span><div class="progress"><div class="progress-inner"></div></div><span class="title">天下HD 凶萌开测</span></a><a href="javascript:;" class="hover"><div class="mask"></div><img src="http://nie.163.com/banner/13v1/nie_txhd0707.jpg"><div class="content"><p>天下HD 凶萌开测</p><span>查看详情<i></i></span></div></a></li><li><a href="javascript:;" class="default"><span class="num">1</span><div class="progress"><div class="progress-inner"></div></div><span class="title">新大话3 全新资料片</span></a><a href="javascript:;" class="hover"><div class="mask"></div><img src="http://nie.163.com/banner/13v1/nie_xy30709.jpg"><div class="content"><p>新大话3 全新资料片</p><span>查看详情<i></i></span></div></a></li><li><a href="javascript:;" class="default"><span class="num">1</span><div class="progress"><div class="progress-inner"></div></div><span class="title">忍者必须死2 新版本</span></a><a href="javascript:;" class="hover"><div class="mask"></div><img src="http://nie.163.com/banner/13v1/nie_rz20140703.jpg"><div class="content"><p>忍者必须死2 新版本</p><span>查看详情<i></i></span></div></a></li><li><a href="javascript:;" class="default"><span class="num">1</span><div class="progress"><div class="progress-inner"></div></div><span class="title">影之刃 终极封测</span></a><a href="javascript:;" class="hover"><div class="mask"></div><img src="http://nie.163.com/banner/13v1/nie_yzr0616.jpg"><div class="content"><p>影之刃 终极封测</p><span>查看详情<i></i></span></div></a></li></ul><ul class="center-slide-res-nav"><li class="on"><a href="http://www.mamicode.com/javascript"></a></li><li><a href="http://www.mamicode.com/javascript"></a></li><li><a href="http://www.mamicode.com/javascript"></a></li><li><a href="http://www.mamicode.com/javascript"></a></li><li><a href="http://www.mamicode.com/javascript"></a></li></ul></section>

网易游戏js-滚动支持自适应