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

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="javascript"></a></li>
<li><a href="javascript"></a></li>
<li><a href="javascript"></a></li>
<li><a href="javascript"></a></li>
<li><a href="javascript"></a></li>
</ul>
</section>