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>