jQuery通栏交互式焦点图切换滑动滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery通栏交互式焦点图切换滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery通栏交互式焦点图切换代码</title>
<meta content="" name="description"/>
<link type="text/css" rel="stylesheet" media="all" href="css/rc_new.css">
<link rel="stylesheet" type="text/css" href="css/slider4.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.min.js"></script>
<script type="text/javascript">
	var slider4 = ['域名代理', '主机产品', '销售方式' , '在线支持'];
	function formatText(index, panel) {return slider4[index - 1];}
	$(document).ready(function(){
		$('#slider4').anythingSlider({
		autoPlay: true,
		hashTags : false,
		buildArrows: true,
		delay: 5000,
		navigationFormatter : formatText,		
		buildStartStop: false
	});
});
</script>
</head>
<body>
<!-- Crouseal -->
	<div class="mst-banner">
		<div class="wrp">

			<!-- Content -->
<div class="masthead4" id="slider-wrp">
				<ul id="slider4">

					<li class="ms-col1 cols cus-pointer" onClick="parent.location='#'" style="cursor:pointer;"> 
                        <div class="ms-title">加入业内最流行的域名代理体系</div>
                        <div class="tld-banner1"></div>
                        <div class="tld-banner2"></div> 
                        <div class="tld-banner3"></div>
                        <div class="tld-banner4"></div>                                                                       
						<ul class="ms-feature list-one">
							<li>.COM & .NET @ ￥55</li>
							<li>.IN @ ￥50</li>
						</ul>
						<ul class="ms-feature list-two">
							<li>70多种域名业内最优价</li>
							<li>白标注册</li>							
						</ul>       
                               						
					</li>

					<li class="ms-col2 cols">
						<div class="ms-title">高利润主机产品</div>
						<p>成为世界级主机提供商<!--Boost your Margins by selling Hosting--></p>
				
						<div class="ms-blurb ms-title one cus-pointer" onClick="parent.location='#'" style="cursor:pointer;">
                        	<span class="ic-thumb-sh"></span>
							多站点主机
							<p>仅需 <span>￥25.50/月起</span></p>
						</div>
						<div class="ms-blurb ms-title two cus-pointer" onClick="parent.location='#'" style="cursor:pointer;">
                        	<span class="ic-thumb-rs"></span>
							分销主机
							<p>仅需<span>￥102/月起</span></p>
						</div>
						<div class="ms-blurb ms-title three cus-pointer" onClick="parent.location='#'" style="cursor:pointer;">
                        	<span class="ic-thumb-vps"></span>
							个人型主机
							<p>仅需<span>￥5.5/月起</span></p>
						</div>
					</li>

					<li class="ms-col3 cols">
						<div class="ms-title">销售方式</div>
						<p>多种选择简化销售</p>
						
						<div class="ms-images one ic-thumb-ss" onClick="parent.location='#'">SuperSite网站</div>
						<div class="ms-images two ic-thumb-api" onClick="parent.location='#'">API接口</div>
						<div class="ms-images three ic-thumb-cp" onClick="parent.location='#'">管理后台</div>
						<div class="ms-images four ic-thumb-whmcs" onClick="parent.location='#'">WHMCS</div>
					</li>

					<li class="ms-col4 cols" onClick="parent.location='#'" style="cursor:pointer;">
						<div class="ms-title">业内最优客户支持</div>
						<p>24 x 7即时在线支持</p>
                        
						<div class="ms-images ic-set ic-thumb-chat">聊天</div>
						<div class="ms-images ic-set ic-thumb-call">拨打电话</div>
						<div class="ms-images ic-set ic-thumb-ticket">提交工单</div>
						<div class="ms-images ic-set ic-thumb-voice">用户反馈</div>
						<div class="ms-images ic-set ic-thumb-kb">知识库</div>
						<div class="ms-images ic-set ic-thumb-email">发送邮件</div>
						<div class="ms-images ic-set ic-thumb-tw">Twitter</div>
						<div class="ms-images ic-set ic-thumb-fb">Facebook</div>
						<div class="ms-images ic-set ic-thumb-ytube">Youtube</div>
                        
						<div class="intro1" style="font-family:'Open Sans',sans-serif;">
                        <div style="float:left; font-size:22px; border-right:4px solid #fff; padding-right:20px; line-height:1;">
                        <div style="font-size:52px;float:left; width:auto; padding-right:10px;">200</div>                        
                         <div style="float:left;  width:auto; line-height:1; padding-top:3px; ">高素质<br/> 支持团队 </div>
                         <div class="clear"></div>
                        </div>
                        
                        <div style="float:left;font-size:22px; padding-left:20px; line-height:1;">
                        <div style="font-size:52px;float:left; width:auto;padding-right:10px;">50+</div>                        
                       <div style="float:left;  width:auto;  line-height:1; padding-top:3px;">专属 <br/> 客户经理</div>
                        <div class="clear"></div>
                        </div>
                        </div>
					</li>
				</ul>
			</div>
		</div>
</div>
</body>
</html>

JS代码(jquery.anythingslider.min.js):

/*! AnythingSlider v1.8.5 minified using Google Closure Compiler Original by Chris Coyier:http://css-tricks.com Get the latest version:https://github.com/ProLoser/AnythingSlider*/
;
	(function(d){
	d.anythingSlider=function(i,k){
	var a=this,b,j;
	a.el=i;
	a.$el=d(i).addClass("anythingBase").wrap('<div class="anythingSlider"><div class="anythingWindow" /></div>');
	a.$el.data("AnythingSlider",a);
	a.init=function(){
	a.options=b=d.extend({
}
,d.anythingSlider.defaults,k);
	a.initialized=!1;
	d.isFunction(b.onBeforeInitialize)&&a.$el.bind("before_initialize",b.onBeforeInitialize);
	a.$el.trigger("before_initialize",a);
	d('<\!--[if lte IE 8]><script>jQuery("body").addClass("as-oldie");
	<\/script><![endif]--\>').appendTo("body").remove();
	a.$wrapper=a.$el.parent().closest("div.anythingSlider").addClass("anythingSlider-"+b.theme);
	a.$window=a.$el.closest("div.anythingWindow");
	a.win=window;
	a.$win=d(a.win);
	a.$controls=d('<div class="anythingControls"></div>');
	a.$nav=d('<ul class="thumbNav"><li><a><span></span></a></li></ul>');
	a.$startStop=d('<a href="#" class="start-stop"></a>');
	if(b.buildStartStop||b.buildNavigation)a.$controls.appendTo(b.appendControlsTo&&d(b.appendControlsTo).length?d(b.appendControlsTo):a.$wrapper);
	b.buildNavigation&& a.$nav.appendTo(b.appendNavigationTo&&d(b.appendNavigationTo).length?d(b.appendNavigationTo):a.$controls);
	b.buildStartStop&&a.$startStop.appendTo(b.appendStartStopTo&&d(b.appendStartStopTo).length?d(b.appendStartStopTo):a.$controls);
	a.runTimes=d(".anythingBase").length;
	a.regex=RegExp("panel"+a.runTimes+"-(\\d+)","i");
	1===a.runTimes&&a.makeActive();
	a.flag=!1;
	a.playing=b.autoPlay;
	a.slideshow=!1;
	a.hovered=!1;
	a.panelSize=[];
	a.currentPage=a.targetPage=b.startPanel=parseInt(b.startPanel,10)||1;
	b.changeBy= parseInt(b.changeBy,10)||1;
	j=(b.mode||"h").toLowerCase().match(/(h|v|f)/);
	j=b.vertical?"v":(j||["h"])[0];
	b.mode="v"===j?"vertical":"f"===j?"fade":"horizontal";
	"f"===j&&(b.showMultiple=1,b.infiniteSlides=!1);
	a.adj=b.infiniteSlides?0:1;
	a.adjustMultiple=0;
	a.width=a.$el.width();
	a.height=a.$el.height();
	a.outerPad=[a.$wrapper.innerWidth()-a.$wrapper.width(),a.$wrapper.innerHeight()-a.$wrapper.height()];
	b.playRtl&&a.$wrapper.addClass("rtl");
	b.expand&&(a.$outer=a.$wrapper.parent(),a.$window.css({
	width:"100%",height:"100%"}
),a.checkResize());
	b.buildStartStop&&a.buildAutoPlay();
	b.buildArrows&&a.buildNextBackButtons();
	b.autoPlay||(b.autoPlayLocked=!1);
	a.$lastPage=a.$targetPage=a.$currentPage;
	a.updateSlider();
	d.isFunction(d.easing[b.easing])||(b.easing="swing");
	b.pauseOnHover&&a.$wrapper.hover(function(){
	if(a.playing){
	a.$el.trigger("slideshow_paused",a);
	a.clearTimer(true)}
}
,function(){
	if(a.playing){
	a.$el.trigger("slideshow_unpaused",a);
	a.startStop(a.playing,true)}
}
);
	a.slideControls(!1);
	a.$wrapper.bind("mouseenter mouseleave",function(b){
	d(this)[b.type==="mouseenter"?"addClass":"removeClass"]("anythingSlider-hovered");
	a.hovered=b.type==="mouseenter"?true:false;
	a.slideControls(a.hovered)}
);
	d(document).keyup(function(c){
	if(b.enableKeyboard&&(a.$wrapper.hasClass("activeSlider")&&!c.target.tagName.match("TEXTAREA|INPUT|SELECT"))&&!(b.mode!=="vertical"&&(c.which===38||c.which===40)))switch(c.which){
	case 39:case 40:a.goForward();
	break;
	case 37:case 38:a.goBack()}
}
);
	a.currentPage=a.gotoHash()||b.startPanel||1;
	a.gotoPage(a.currentPage,!1,null,-1);
	var c="slideshow_paused slideshow_unpaused slide_init slide_begin slideshow_stop slideshow_start initialized swf_completed".split(" ");
	d.each("onShowPause onShowUnpause onSlideInit onSlideBegin onShowStop onShowStart onInitialized onSWFComplete".split(" "),function(f,e){
	d.isFunction(b[e])&&a.$el.bind(c[f],b[e])}
);
	d.isFunction(b.onSlideComplete)&&a.$el.bind("slide_complete",function(){
	setTimeout(function(){
	b.onSlideComplete(a)}
,0);
	return false}
);
	a.initialized=!0;
	a.$el.trigger("initialized",a);
	a.startStop(b.autoPlay)}
;
	a.updateSlider=function(){
	a.$el.children(".cloned").remove();
	a.navTextVisible="hidden"!==a.$nav.find("span:first").css("visibility");
	a.$nav.empty();
	a.currentPage=a.currentPage||1;
	a.$items=a.$el.children();
	a.pages=a.$items.length;
	a.dir="vertical"===b.mode?"top":"left";
	b.showMultiple="vertical"===b.mode?1:parseInt(b.showMultiple,10)||1;
	b.navigationSize=!1===b.navigationSize?0:parseInt(b.navigationSize,10)||0;
	a.$items.find("a").unbind("focus.AnythingSlider").bind("focus.AnythingSlider",function(c){
	var f=d(this).closest(".panel"),f=a.$items.index(f)+a.adj;
	a.$items.find(".focusedLink").removeClass("focusedLink");
	d(this).addClass("focusedLink");
	a.$window.scrollLeft(0).scrollTop(0);
	if(-1!==f&&(f>=a.currentPage+b.showMultiple||f<a.currentPage))a.gotoPage(f),c.preventDefault()}
);
	1<b.showMultiple&&(b.showMultiple>a.pages&&(b.showMultiple=a.pages),a.adjustMultiple=b.infiniteSlides&&1<a.pages?0:b.showMultiple-1);
	a.$controls.add(a.$nav).add(a.$startStop).add(a.$forward).add(a.$back)[1>=a.pages? "hide":"show"]();
	1<a.pages&&a.buildNavigation();
	"fade"!==b.mode&&(b.infiniteSlides&&1<a.pages)&&(a.$el.prepend(a.$items.filter(":last").clone().addClass("cloned")),1<b.showMultiple?a.$el.append(a.$items.filter(":lt("+b.showMultiple+")").clone().addClass("cloned multiple")):a.$el.append(a.$items.filter(":first").clone().addClass("cloned")),a.$el.find(".cloned").each(function(){
	d(this).find("a,input,textarea,select,button,area,form").attr({
	disabled:"disabled",name:""}
);
	d(this).find("[id]").andSelf().removeAttr("id")}
));
	a.$items=a.$el.addClass(b.mode).children().addClass("panel");
	a.setDimensions();
	b.resizeContents?(a.$items.css("width",a.width),a.$wrapper.css("width",a.getDim(a.currentPage)[0]).add(a.$items).css("height",a.height)):a.$win.load(function(){
	a.setDimensions();
	j=a.getDim(a.currentPage);
	a.$wrapper.css({
	width:j[0],height:j[1]}
);
	a.setCurrentPage(a.currentPage,false)}
);
	a.currentPage>a.pages&&(a.currentPage=a.pages);
	a.setCurrentPage(a.currentPage,!1);
	a.$nav.find("a").eq(a.currentPage-1).addClass("cur");
	"fade"=== b.mode&&a.$items.eq(a.currentPage-1).css({
	opacity:1}
).siblings().css({
	opacity:0}
)}
;
	a.buildNavigation=function(){
	if(b.buildNavigation&&1<a.pages){
	var c,f,e,g,h;
	a.$items.filter(":not(.cloned)").each(function(m){
	h=d("<li/>");
	e=m+1;
	f=(1===e?" first":"")+(e===a.pages?" last":"");
	c='<a class="panel'+e+(a.navTextVisible?'"':" "+b.tooltipClass+'" title="@"')+' href="#"><span>@</span></a>';
	d.isFunction(b.navigationFormatter)?(g=b.navigationFormatter(e,d(this)),"string"===typeof g?h.html(c.replace(/@/g,g)):h=d("<li/>",g)):h.html(c.replace(/@/g,e));
	h.appendTo(a.$nav).addClass(f).data("index",e)}
);
	a.$nav.children("li").bind(b.clickControls,function(c){
	!a.flag&&b.enableNavigation&&(a.flag=!0,setTimeout(function(){
	a.flag=!1}
,100),a.gotoPage(d(this).data("index")));
	c.preventDefault()}
);
	b.navigationSize&&b.navigationSize<a.pages&&(a.$controls.find(".anythingNavWindow").length||a.$nav.before('<ul><li class="prev"><a href="#"><span>'+b.backText+"</span></a></li></ul>").after('<ul><li class="next"><a href="#"><span>'+ b.forwardText+"</span></a></li></ul>").wrap('<div class="anythingNavWindow"></div>'),a.navWidths=a.$nav.find("li").map(function(){
	return d(this).outerWidth(!0)+Math.ceil(parseInt(d(this).find("span").css("left"),10)/2||0)}
).get(),a.navLeft=a.currentPage,a.$nav.width(a.navWidth(1,a.pages+1)+25),a.$controls.find(".anythingNavWindow").width(a.navWidth(1,b.navigationSize+1)).end().find(".prev,.next").bind(b.clickControls,function(c){
	a.flag||(a.flag=!0,setTimeout(function(){
	a.flag=!1}
,200),a.navWindow(a.navLeft+ b.navigationSize*(d(this).is(".prev")?-1:1)));
	c.preventDefault()}
))}
}
;
	a.navWidth=function(b,f){
	var e;
	e=Math.min(b,f);
	for(var d=Math.max(b,f),h=0;
	e<d;
	e++)h+=a.navWidths[e-1]||0;
	return h}
;
	a.navWindow=function(c){
	if(b.navigationSize&&b.navigationSize<a.pages&&a.navWidths){
	var f=a.pages-b.navigationSize+1,c=1>=c?1:1<c&&c<f?c:f;
	c!==a.navLeft&&(a.$controls.find(".anythingNavWindow").animate({
	scrollLeft:a.navWidth(1,c),width:a.navWidth(c,c+b.navigationSize)}
,{
	queue:!1,duration:b.animationTime}
),a.navLeft= c)}
}
;
	a.buildNextBackButtons=function(){
	a.$forward=d('<span class="arrow forward"><a href="#"><span>'+b.forwardText+"</span></a></span>");
	a.$back=d('<span class="arrow back"><a href="#"><span>'+b.backText+"</span></a></span>");
	a.$back.bind(b.clickBackArrow,function(c){
	b.enableArrows&&!a.flag&&(a.flag=!0,setTimeout(function(){
	a.flag=!1}
,100),a.goBack());
	c.preventDefault()}
);
	a.$forward.bind(b.clickForwardArrow,function(c){
	b.enableArrows&&!a.flag&&(a.flag=!0,setTimeout(function(){
	a.flag=!1}
,100),a.goForward());
	c.preventDefault()}
);
	a.$back.add(a.$forward).find("a").bind("focusin focusout",function(){
	d(this).toggleClass("hover")}
);
	a.$back.appendTo(b.appendBackTo&&d(b.appendBackTo).length?d(b.appendBackTo):a.$wrapper);
	a.$forward.appendTo(b.appendForwardTo&&d(b.appendForwardTo).length?d(b.appendForwardTo):a.$wrapper);
	a.arrowWidth=a.$forward.width();
	a.arrowRight=parseInt(a.$forward.css("right"),10);
	a.arrowLeft=parseInt(a.$back.css("left"),10)}
;
	a.buildAutoPlay=function(){
	a.$startStop.html("<span>"+(a.playing? b.stopText:b.startText)+"</span>").bind(b.clickSlideshow,function(c){
	b.enableStartStop&&(a.startStop(!a.playing),a.makeActive(),a.playing&&!b.autoPlayDelayed&&a.goForward(!0));
	c.preventDefault()}
).bind("focusin focusout",function(){
	d(this).toggleClass("hover")}
)}
;
	a.checkResize=function(c){
	clearTimeout(a.resizeTimer);
	a.resizeTimer=setTimeout(function(){
	var f=a.$outer.width()-a.outerPad[0],e=("BODY"===a.$outer[0].tagName?a.$win.height():a.$outer.height())-a.outerPad[1];
	if(a.width*b.showMultiple!==f|| a.height!==e)a.setDimensions(),a.gotoPage(a.currentPage,a.playing,null,-1);
	"undefined"===typeof c&&a.checkResize()}
,500)}
;
	a.setDimensions=function(){
	var c,f,e,g,h=0,i={
	width:"100%",height:"100%"}
,j=1<b.showMultiple?a.width||a.$window.width()/b.showMultiple:a.$window.width(),l=a.$win.width();
	b.expand&&(c=a.$outer.width()-a.outerPad[0],a.height=f=a.$outer.height()-a.outerPad[1],a.$wrapper.add(a.$window).add(a.$items).css({
	width:c,height:f}
),a.width=j=1<b.showMultiple?c/b.showMultiple:c);
	a.$items.each(function(k){
	g= d(this);
	e=g.children();
	if(b.resizeContents){
	c=a.width;
	f=a.height;
	g.css({
	width:c,height:f}
);
	if(e.length){
	e[0].tagName==="EMBED"&&e.attr(i);
	e[0].tagName==="OBJECT"&&e.find("embed").attr(i);
	e.length===1&&e.css(i)}
}
else{
	c=g.width()||a.width;
	if(e.length===1&&c>=l){
	c=e.width()>=l?j:e.width();
	e.css("max-width",c)}
g.css("width",c);
	f=e.length===1?e.outerHeight(true):g.height();
	if(f<=a.outerPad[1])f=a.height;
	g.css("height",f)}
a.panelSize[k]=[c,f,h];
	h=h+(b.mode==="vertical"?f:c)}
);
	a.$el.css("vertical"===b.mode? "height":"width","fade"===b.mode?a.width:h)}
;
	a.getDim=function(c){
	var f,e=a.width,d=a.height;
	if(1>a.pages||isNaN(c))return[e,d];
	c=b.infiniteSlides&&1<a.pages?c:c-1;
	if(f=a.panelSize[c])e=f[0]||e,d=f[1]||d;
	if(1<b.showMultiple)for(f=1;
	f<b.showMultiple;
	f++)e+=a.panelSize[c+f][0],d=Math.max(d,a.panelSize[c+f][1]);
	return[e,d]}
;
	a.goForward=function(c){
	a.gotoPage(a[b.allowRapidChange?"targetPage":"currentPage"]+b.changeBy*(b.playRtl?-1:1),c)}
;
	a.goBack=function(c){
	a.gotoPage(a[b.allowRapidChange?"targetPage":"currentPage"]+b.changeBy*(b.playRtl?1:-1),c)}
;
	a.gotoPage=function(c,f,e,g){
	!0!==f&&(f=!1,a.startStop(!1),a.makeActive());
	/^[#|.]/.test(c)&&d(c).length&&(c=d(c).closest(".panel").index()+a.adj);
	if(1!==b.changeBy){
	var h=a.pages-a.adjustMultiple;
	1>c&&(c=b.stopAtEnd?1:b.infiniteSlides?a.pages+c:b.showMultiple>1-c?1:h);
	c>a.pages?c=b.stopAtEnd?a.pages:b.showMultiple>1-c?1:c-=h:c>=h&&(c=h)}
if(!(1>=a.pages)&&(a.$lastPage=a.$currentPage,"number"!==typeof c&&(c=parseInt(c,10)||b.startPanel,a.setCurrentPage(c)),!f||!b.isVideoPlaying(a)))a.exactPage=c,c>a.pages+1-a.adj&&(c=!b.infiniteSlides&&!b.stopAtEnd?1:a.pages),c<a.adj&&(c=!b.infiniteSlides&&!b.stopAtEnd?a.pages:1),b.infiniteSlides||(a.exactPage=c),a.currentPage=c>a.pages?a.pages:1>c?1:a.currentPage,a.$currentPage=a.$items.removeClass("activePage").eq(a.currentPage-a.adj),a.targetPage=0===c?a.pages:c>a.pages?1:c,a.$targetPage=a.$items.eq(a.targetPage-a.adj),g=g||b.animationTime,0<=g&&a.$el.trigger("slide_init",a),0<g&&a.slideControls(!0),b.buildNavigation&& a.setNavigation(a.targetPage),!0!==f&&(f=!1),(!f||b.stopAtEnd&&c===a.pages)&&a.startStop(!1),0<=g&&a.$el.trigger("slide_begin",a),setTimeout(function(d){
	var f,h=true;
	b.allowRapidChange&&a.$wrapper.add(a.$el).add(a.$items).stop(true,true);
	if(!b.resizeContents){
	f=a.getDim(c);
	d={
}
;
	if(a.$wrapper.width()!==f[0]){
	d.width=f[0]||a.width;
	h=false}
if(a.$wrapper.height()!==f[1]){
	d.height=f[1]||a.height;
	h=false}
h||a.$wrapper.filter(":not(:animated)").animate(d,{
	queue:false,duration:g<0?0:g,easing:b.easing}
)}
if(b.mode=== "fade")if(a.$lastPage[0]!==a.$targetPage[0]){
	a.$lastPage.filter(":not(:animated)").fadeTo(g<0?0:g,0);
	a.$targetPage.filter(":not(:animated)").fadeTo(g<0?0:g,1,function(){
	a.endAnimation(c,e,g)}
)}
else a.endAnimation(c,e,g);
	else{
	d={
}
;
	d[a.dir]=-a.panelSize[b.infiniteSlides&&a.pages>1?c:c-1][2];
	a.$el.filter(":not(:animated)").animate(d,{
	queue:false,duration:g,easing:b.easing,complete:function(){
	a.endAnimation(c,e,g)}
}
)}
}
,parseInt(b.delayBeforeAnimate,10)||0)}
;
	a.endAnimation=function(c,d,e){
	0===c?(a.$el.css(a.dir,"fade"===b.mode?0:-a.panelSize[a.pages][2]),c=a.pages):c>a.pages&&(a.$el.css(a.dir,"fade"===b.mode?0:-a.panelSize[1][2]),c=1);
	a.exactPage=c;
	a.setCurrentPage(c,!1);
	"fade"===b.mode&&a.$items.not(":eq("+(c-a.adj)+")").css("opacity",0);
	a.hovered||a.slideControls(!1);
	b.hashTags&&a.setHash(c);
	0<=e&&a.$el.trigger("slide_complete",a);
	"function"===typeof d&&d(a);
	b.autoPlayLocked&&!a.playing&&setTimeout(function(){
	a.startStop(true)}
,b.resumeDelay-(b.autoPlayDelayed?b.delay:0))}
;
	a.setCurrentPage=function(c,d){
	c=parseInt(c,10);
	if(!(1>a.pages||0===c||isNaN(c))){
	c>a.pages+1-a.adj&&(c=a.pages-a.adj);
	c<a.adj&&(c=1);
	b.buildArrows&&(!b.infiniteSlides&&b.stopAtEnd)&&(a.$forward[c===a.pages-a.adjustMultiple?"addClass":"removeClass"]("disabled"),a.$back[1===c?"addClass":"removeClass"]("disabled"),c===a.pages&&a.playing&&a.startStop());
	if(!d){
	var e=a.getDim(c);
	a.$wrapper.css({
	width:e[0],height:e[1]}
).add(a.$window).scrollLeft(0).scrollTop(0);
	a.$el.css(a.dir,"fade"===b.mode?0:-a.panelSize[b.infiniteSlides&&1<a.pages? c:c-1][2])}
a.currentPage=c;
	a.$currentPage=a.$items.removeClass("activePage").eq(c-a.adj).addClass("activePage");
	b.buildNavigation&&a.setNavigation(c)}
}
;
	a.setNavigation=function(b){
	a.$nav.find(".cur").removeClass("cur").end().find("a").eq(b-1).addClass("cur")}
;
	a.makeActive=function(){
	a.$wrapper.hasClass("activeSlider")||(d(".activeSlider").removeClass("activeSlider"),a.$wrapper.addClass("activeSlider"))}
;
	a.gotoHash=function(){
	var c=a.win.location.hash,f=c.indexOf("&"),e=c.match(a.regex);
	null===e&& !/^#&/.test(c)&&!/#!?\//.test(c)?(c=c.substring(0,0<=f?f:c.length),e=d(c).length&&d(c).closest(".anythingBase")[0]===a.el?a.$items.index(d(c).closest(".panel"))+a.adj:null):null!==e&&(e=b.hashTags?parseInt(e[1],10):null);
	return e}
;
	a.setHash=function(b){
	var d="panel"+a.runTimes+"-",e=a.win.location.hash;
	"undefined"!==typeof e&&(a.win.location.hash=0<e.indexOf(d)?e.replace(a.regex,d+b):e+"&"+d+b)}
;
	a.slideControls=function(c){
	var d=c?0:b.animationTime,e=c?b.animationTime:0,g=c?1:0,h=c?0:1;
	b.toggleControls&& a.$controls.stop(!0,!0).delay(d)[c?"slideDown":"slideUp"](b.animationTime/2).delay(e);
	b.buildArrows&&b.toggleArrows&&(!a.hovered&&a.playing&&(h=1,g=0),a.$forward.stop(!0,!0).delay(d).animate({
	right:a.arrowRight+h*a.arrowWidth,opacity:g}
,b.animationTime/2),a.$back.stop(!0,!0).delay(d).animate({
	left:a.arrowLeft+h*a.arrowWidth,opacity:g}
,b.animationTime/2))}
;
	a.clearTimer=function(b){
	a.timer&&(a.win.clearInterval(a.timer),!b&&a.slideshow&&(a.$el.trigger("slideshow_stop",a),a.slideshow=!1))}
;
	a.startStop= function(c,d){
	!0!==c&&(c=!1);
	if((a.playing=c)&&!d)a.$el.trigger("slideshow_start",a),a.slideshow=!0;
	b.buildStartStop&&(a.$startStop.toggleClass("playing",c).find("span").html(c?b.stopText:b.startText),"hidden"===a.$startStop.find("span").css("visibility")&&a.$startStop.addClass(b.tooltipClass).attr("title",c?b.stopText:b.startText));
	c?(a.clearTimer(!0),a.timer=a.win.setInterval(function(){
	b.isVideoPlaying(a)?b.resumeOnVideoEnd||a.startStop():a.goForward(true)}
,b.delay)):a.clearTimer()}
;
	a.init()}
;
	d.anythingSlider.defaults={
	theme:"default",mode:"horiz",expand:!1,resizeContents:!0,showMultiple:!1,easing:"swing",buildArrows:!0,buildNavigation:!0,buildStartStop:!0,toggleArrows:!1,toggleControls:!1,startText:"Start",stopText:"Stop",forwardText:"&raquo;
	",backText:"&laquo;
	",tooltipClass:"tooltip",enableArrows:!0,enableNavigation:!0,enableStartStop:!0,enableKeyboard:!0,startPanel:1,changeBy:1,hashTags:!0,infiniteSlides:!0,navigationFormatter:null,navigationSize:!1,autoPlay:!1,autoPlayLocked:!1,autoPlayDelayed:!1,pauseOnHover:!0,stopAtEnd:!1,playRtl:!1,delay:3E3,resumeDelay:15E3,animationTime:600,delayBeforeAnimate:0,clickForwardArrow:"click",clickBackArrow:"click",clickControls:"click focusin",clickSlideshow:"click",allowRapidChange:!1,resumeOnVideoEnd:!0,resumeOnVisible:!0,addWmodeToObject:"opaque",isVideoPlaying:function(){
	return!1}
}
;
	d.fn.anythingSlider=function(i,k){
	return this.each(function(){
	var a,b=d(this).data("AnythingSlider");
	(typeof i).match("object|undefined")?b?b.updateSlider():new d.anythingSlider(this,i):/\d/.test(i)&&!isNaN(i)&&b?(a="number"===typeof i?i:parseInt(d.trim(i),10),1<=a&&a<=b.pages&&b.gotoPage(a,!1,k)):/^[#|.]/.test(i)&&d(i).length&&b.gotoPage(i,!1,k)}
)}
}
)(jQuery);

CSS代码(rc_new.css):

/* Reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{margin:0;padding:0;vertical-align:baseline;background:transparent;text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
input,select{vertical-align:middle;}
/* -- */

CSS代码(slider4.css):

.mst-banner{background:url(../images/mastheadblue-bg.jpg) no-repeat;}
.prod-support-list li{width:170px;height:47px;float:left;padding-left:68px;padding-top:16px;font-weight:bold;font-size:16px;margin-bottom:12px;margin-left:0;padding-right:0;}
.masthead4{color:#fff;}
.masthead4 .ms-title{font:600 45px/54px 'Open Sans',sans-serif;color:#fff;text-shadow:0 2px 1px #175b6e;text-align:center;padding-top:30px;letter-spacing:-2px;}
.ms-feature li{font:bold 22px 'Open Sans',sans-serif;padding:0 0 8px 15px;background:url(../images/ic-bull-white.png) no-repeat scroll 0 13px transparent;}
.masthead4 .cols p{font:600 24px 'Open Sans',sans-serif;text-align:center;text-shadow:0 2px 1px #1e7d99;padding-top:5px;}
#slider4{width:990px;height:378px;list-style:none;overflow:hidden;}
.anythingSlider .wrapper{padding:12px 0 0 0;}
div.anythingSlider{display:block;margin:0 auto;overflow:visible !important;position:relative;}
div.anythingSlider .anythingWindow{overflow:hidden;position:relative;width:100%;height:100%;}
.anythingBase{background:transparent;list-style:none;position:absolute;overflow:visible !important;top:0;left:0;margin:0;padding:0;}
.anythingBase .panel{background:transparent;display:block;overflow:hidden;float:left;padding:0;margin:0;position:relative;}
div.anythingSlider .anythingControls ul li{display:inline;}
div.anythingSlider .anythingControls ul li a{display:inline-block;background:#fff;padding:10px 20px;color:#817f80;font:600 15px 'Open Sans',sans-serif;border-top:solid 1px #e8e8e8;border-bottom:solid 1px #e8e8e8;border-left:solid 1px #3d9dce;text-transform:uppercase;}
.anythingControls .thumbNav a.cur{background:#000000;color:#fff;border:solid 1px #000;}
.anythingControls .thumbNav{position:absolute;right:0;bottom:-26px;text-align:center;width:990px;}
#slider-wrp{position:relative;height:415px;/*overflow:hidden;*/
}
div.anythingSlider .arrow a{display:block;height:35px;outline:0 none;text-indent:-9999px;width:35px;}
div.anythingSlider .arrow{display:block;position:absolute;top:362px;}
div.anythingSlider .forward{right:245px;background:url(../images/arrow-right.jpg) no-repeat scroll 12px 9px #FFFFFF;border:1px solid #E2E2E2;border-left:solid 1px #3d9dce;height:40px;width:38px;}
div.anythingSlider .back{background:url(../images/arrow-left.jpg) no-repeat scroll 12px 9px #FFFFFF;border:1px solid #E2E2E2;height:40px;left:244px;width:38px;}
.anythingWindow .ms-col1{background:url("../images/sl4-sl1-img3.png") no-repeat scroll 383px 158px transparent;}
.tld-banner1{background:url("../images/sl4-sl1-img1.png") no-repeat scroll 0 0 transparent;position:absolute;top:53px;right:-52px;width:221px;height:181px;}
.tld-banner2{background:url("../images/sl4-sl1-img2.png") no-repeat scroll 0 0 transparent;position:absolute;top:72px;left:-12px;width:221px;height:196px;}
.tld-banner3{background:url("../images/sl4-sl1-img1.png") no-repeat scroll 0 0 transparent;position:absolute;top:160px;left:205px;width:221px;height:196px;}
.tld-banner4{background:url("../images/sl4-sl1-img2.png") no-repeat scroll 0 0 transparent;height:196px;position:absolute;right:156px;top:157px;width:231px;}
.ms-col1 .list-one{position:absolute;top:211px;left:112px;}
.ms-col1 .list-two{position:absolute;top:211px;right:28px;}
.masthead4 .ms-col2 .ms-blurb.ms-title{background:url("../images/white-blurb.png") no-repeat scroll 0 0 transparent;color:#505050;font:bold 22px 'Open Sans',sans-serif;height:128px;padding-top:43px;text-align:left;text-shadow:none;width:323px;letter-spacing:normal;cursor:pointer;}
.masthead4 .ms-col2 .ms-blurb p{font:600 14px 'Open Sans',sans-serif;color:#6dc71a;text-align:left;text-shadow:none;padding-top:9px;letter-spacing:normal;}
.masthead4 .ms-col2 .ms-blurb p span{display:block;font:400 27px 'Open Sans',sans-serif;text-align:left;color:#6dc71a;}
.masthead4 .ms-col2 .ms-blurb{position:absolute;}
.masthead4 .ms-col2 .one{top:141px;left:33px;}
.masthead4 .ms-col2 .two{top:161px;left:346px;z-index:99;}
.masthead4 .ms-col2 .three{top:139px;right:8px;}
.ic-thumb-sh{display:inline-block;vertical-align:middle;background:url("../images/ic-thumb-sh.jpg") no-repeat scroll 6px 0 transparent;width:120px;height:99px;float:left}
.ic-thumb-rs{display:inline-block;vertical-align:middle;background:url("../images/ic-thumb-rs.jpg") no-repeat scroll 4px 0 transparent;width:122px;height:99px;float:left;}
.ic-thumb-vps{display:inline-block;vertical-align:middle;background:url("../images/ic-thumb-vps.jpg") no-repeat scroll 14px 0 transparent;width:123px;height:102px;float:left;}
.masthead4 .ms-col3 .ms-images{font:bold 22px 'Open Sans',sans-serif;color:#fff;text-align:center;position:absolute;padding-top:164px;cursor:pointer;}
.masthead4 .ms-col3 .one{top:140px;left:9px;}
.masthead4 .ms-col3 .two{top:143px;left:337px;}
.masthead4 .ms-col3 .three{top:140px;left:589px;}
.masthead4 .ms-col3 .four{top:140px;left:820px;}
.masthead4 .ms-col3 .ic-thumb-ss{background:url("../images/ic-thumb-supersite.png") no-repeat scroll 0 4px transparent;width:250px;height:35px;}
.masthead4 .ms-col3 .ic-thumb-cp{background:url("../images/ic-thumb-cp.png") no-repeat scroll 0 4px transparent;width:161px;height:35px;}
.masthead4 .ms-col3 .ic-thumb-api{background:url("../images/ic-thumb-api.png") no-repeat scroll 0 4px transparent;width:161px;height:35px;}
.masthead4 .ms-col3 .ic-thumb-whmcs{background:url("../images/ic-thumb-whmcs.png") no-repeat scroll 0 4px transparent;width:167px;height:35px;}
.ms-col4 .ms-images{font:bold 15px 'Open Sans',sans-serif;color:#fff;position:absolute;text-align:center;padding-top:62px;}
.ms-col4 .intro1{font:bold 26px 'Open Sans',sans-serif;/*background:url("../images/sld4-img.jpg") no-repeat scroll 0 0 transparent;text-indent:-999em;*/
position:absolute;top:265px;left:290px;width:621px;height:55px;}
.ms-col4 .intro1 span{font:bold 78px 'Open Sans',sans-serif;}
.ms-col4 .intro2{font:bold 26px 'Open Sans',sans-serif;}
.ms-col4 .intro2 span{font:bold 78px 'Open Sans',sans-serif;}
.ms-col4 .ic-thumb-chat{background:url("../images/ic-thumb-chat.png") no-repeat scroll 0 0 transparent;width:66px;height:63px;top:145px;left:11px;}
.ms-col4 .ic-thumb-call{background:url("../images/ic-thumb-phone.png") no-repeat scroll 0 0 transparent;width:62px;height:63px;top:145px;left:112px;}
.ms-col4 .ic-thumb-ticket{background:url("../images/ic-thumb-ticket.png") no-repeat scroll 25px 0 transparent;width:106px;height:63px;top:145px;left:207px;}
.ms-col4 .ic-thumb-voice{background:url("../images/ic-thumb-microp.png") no-repeat scroll 0 0 transparent;width:75px;height:63px;top:146px;left:347px;}
.ms-col4 .ic-thumb-kb{background:url("../images/ic-thumb-kb.png") no-repeat scroll 29px 0 transparent;width:120px;height:63px;top:145px;left:454px;}
.ms-col4 .ic-thumb-email{background:url("../images/ic-thumb-email.png") no-repeat scroll 19px 0px transparent;width:107px;height:63px;top:145px;left:600px;padding-top:63px;}
.ms-col4 .ic-thumb-tw{background:url("../images/ic-thumb-twt.png") no-repeat scroll 5px 0 transparent;width:75px;height:63px;top:145px;left:724px;}
.ms-col4 .ic-thumb-fb{background:url("../images/ic-thumb-fb.png") no-repeat scroll 0 0 transparent;width:65px;height:63px;top:145px;left:831px;}
.ms-col4 .ic-thumb-ytube{background:url("../images/ic-thumb-yt.png") no-repeat scroll 0 0 transparent;width:64px;height:63px;top:145px;left:927px;}

附件:下载该文件资源,减少时间成本(增值服务)