jquery左右滚动切换轮播特效代码

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

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

以下是 jquery左右滚动切换轮播特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery左右滚动切换</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body class="loading">
<div class="main" style="margin-top:50px;">
	<div class="pro-switch">
		<div class="slider">
			<div class="flexslider">
				<ul class="slides">
					<li>
						<div class="img"><img src="images/ad_home.jpg" height="450" width"960" alt="" /></div>
					</li>
					<li>
						<div class="img"><img src="images/ad_yuetu.jpg" height="450" width"960" alt="" /></div>
					</li>
					<li>
						<div class="img"><img src="images/ad_nba.jpg" height="450" width"960" alt="" /></div>
					</li>
					<li>
						<div class="img"><img src="images/ad_stock.jpg" height="450" width"960" alt="" /></div>
					</li>
					<li>
						<div class="img"><img src="images/ad_auto.jpg" height="450" width"960" alt="" /></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<script defer src="js/slider.js"></script> 
<script type="text/javascript">
    $(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>
</body>
</html>

JS代码(png.js):

/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
	// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
	// argument is an HTMLDomElement**/
var DD_belatedPNG={
	ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
	if(document.namespaces&&!document.namespaces[this.ns]){
	document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
	var b,a;
	b=document.createElement("style");
	b.setAttribute("media","screen");
	document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
	if(b.styleSheet){
	b=b.styleSheet;
	b.addRule(this.ns+"\\:*","{
	behavior:url(#default#VML)}
");
	b.addRule(this.ns+"\\:shape","position:absolute;
	");
	b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	");
	this.screenStyleSheet=b;
	a=document.createElement("style");
	a.setAttribute("media","print");
	document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
	a=a.styleSheet;
	a.addRule(this.ns+"\\:*","{
	display:none !important;
}
");
	a.addRule("img."+this.ns+"_sizeFinder","{
	display:none !important;
}
")}
}
,readPropertyChange:function(){
	var b,c,a;
	b=event.srcElement;
	if(!b.vmlInitiated){
	return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
	DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
	c=(b.currentStyle.display=="none")?"none":"block";
	for(a in b.vml){
	if(b.vml.hasOwnProperty(a)){
	b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
	DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
	if(b.currentStyle.filter.search("lpha")!=-1){
	var a=b.currentStyle.filter;
	a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
	b.vml.color.shape.style.filter=b.currentStyle.filter;
	b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
	setTimeout(function(){
	DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
	if(this.screenStyleSheet){
	var c,b;
	c=a.split(",");
	for(b=0;
	b<c.length;
	b++){
	this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
	a.runtimeStyle.cssText="";
	this.vmlFill(a);
	this.vmlOffsets(a);
	this.vmlOpacity(a);
	if(a.isImg){
	this.copyImageBorders(a)}
}
,attachHandlers:function(i){
	var d,c,g,e,b,f;
	d=this;
	c={
	resize:"vmlOffsets",move:"vmlOffsets"}
;
	if(i.nodeName=="A"){
	e={
	mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
	for(b in e){
	if(e.hasOwnProperty(b)){
	c[b]=e[b]}
}
}
for(f in c){
	if(c.hasOwnProperty(f)){
	g=function(){
	d[c[f]](i)}
;
	i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
	a.style.zoom=1;
	if(a.currentStyle.position=="static"){
	a.style.position="relative"}
}
,copyImageBorders:function(b){
	var c,a;
	c={
	borderStyle:true,borderWidth:true,borderColor:true}
;
	for(a in c){
	if(c.hasOwnProperty(a)){
	b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
	if(!e.currentStyle){
	return}
else{
	var d,f,g,b,a,c;
	d=e.currentStyle}
for(b in e.vml){
	if(e.vml.hasOwnProperty(b)){
	e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
	e.runtimeStyle.backgroundImage="";
	f=true;
	if(d.backgroundImage!="none"||e.isImg){
	if(!e.isImg){
	e.vmlBg=d.backgroundImage;
	e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
	e.vmlBg=e.src}
g=this;
	if(!g.imgSize[e.vmlBg]){
	a=document.createElement("img");
	g.imgSize[e.vmlBg]=a;
	a.className=g.ns+"_sizeFinder";
	a.runtimeStyle.cssText="behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	";
	c=function(){
	this.width=this.offsetWidth;
	this.height=this.offsetHeight;
	g.vmlOffsets(e)}
;
	a.attachEvent("onload",c);
	a.src=e.vmlBg;
	a.removeAttribute("width");
	a.removeAttribute("height");
	document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
	f=false}
e.vml.image.fill.on=!f;
	e.vml.image.fill.color="none";
	e.vml.color.shape.style.backgroundColor=d.backgroundColor;
	e.runtimeStyle.backgroundImage="none";
	e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
	var h,n,a,e,g,m,f,l,j,i,k;
	h=d.currentStyle;
	n={
	W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
	a=(n.L+n.bLW==1)?1:0;
	e=function(b,p,q,c,s,u){
	b.coordsize=c+","+s;
	b.coordorigin=u+","+u;
	b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
	b.style.width=c+"px";
	b.style.height=s+"px";
	b.style.left=p+"px";
	b.style.top=q+"px"}
;
	e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
	e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
	g={
	X:0,Y:0}
;
	if(d.isImg){
	g.X=parseInt(h.paddingLeft,10)+1;
	g.Y=parseInt(h.paddingTop,10)+1}
else{
	for(j in g){
	if(g.hasOwnProperty(j)){
	this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
	m=h.backgroundRepeat;
	f={
	T:1,R:n.W+a,B:n.H,L:1+a}
;
	l={
	X:{
	b1:"L",b2:"R",d:"W"}
,Y:{
	b1:"T",b2:"B",d:"H"}
}
;
	if(m!="repeat"||d.isImg){
	i={
	T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
	if(m.search("repeat-")!=-1){
	k=m.split("repeat-")[1].toUpperCase();
	i[l[k].b1]=1;
	i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
	i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
	d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
	var b,e;
	e=true;
	b=(f=="X");
	switch(a){
	case"left":case"top":d[f]=0;
	break;
	case"center":d[f]=0.5;
	break;
	case"right":case"bottom":d[f]=1;
	break;
	default:if(a.search("%")!=-1){
	d[f]=parseInt(a,10)/100}
else{
	e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
	if(d[f]%2===0){
	d[f]++}
return d[f]}
,fixPng:function(c){
	c.style.behavior="none";
	var g,b,f,a,d;
	if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
	return}
c.isImg=false;
	if(c.nodeName=="IMG"){
	if(c.src.toLowerCase().search(/\.png$/)!=-1){
	c.isImg=true;
	c.style.visibility="hidden"}
else{
	return}
}
else{
	if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
	return}
}
g=DD_belatedPNG;
	c.vml={
	color:{
}
,image:{
}
}
;
	b={
	shape:{
}
,fill:{
}
}
;
	for(a in c.vml){
	if(c.vml.hasOwnProperty(a)){
	for(d in b){
	if(b.hasOwnProperty(d)){
	f=g.ns+":"+d;
	c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
	c.vml[a].shape.appendChild(c.vml[a].fill);
	c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
	c.vml.image.fill.type="tile";
	c.vml.color.fill.on=false;
	g.attachHandlers(c);
	g.giveLayout(c);
	g.giveLayout(c.offsetParent);
	c.vmlInitiated=true;
	g.applyVML(c)}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

JS代码(slider.js):

;
	(function(d){
	d.flexslider=function(i,k){
	var a=d(i),c=d.extend({
}
,d.flexslider.defaults,k),e=c.namespace,p="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,t=p?"touchend":"click",l="vertical"===c.direction,m=c.reverse,h=0<c.itemWidth,r="fade"===c.animation,s=""!==c.asNavFor,f={
}
;
	d.data(i,"flexslider",a);
	f={
	init:function(){
	a.animating=!1;
	a.currentSlide=c.startAt;
	a.animatingTo=a.currentSlide;
	a.atEnd=0===a.currentSlide||a.currentSlide===a.last;
	a.containerSelector=c.selector.substr(0,c.selector.search(" "));
	a.slides=d(c.selector,a);
	a.container=d(a.containerSelector,a);
	a.count=a.slides.length;
	a.syncExists=0<d(c.sync).length;
	"slide"===c.animation&&(c.animation="swing");
	a.prop=l?"top":"marginLeft";
	a.args={
}
;
	a.manualPause=!1;
	var b=a,g;
	if(g=!c.video)if(g=!r)if(g=c.useCSS)a:{
	g=document.createElement("div");
	var n=["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"],e;
	for(e in n)if(void 0!==g.style[n[e]]){
	a.pfx=n[e].replace("Perspective","").toLowerCase();
	a.prop="-"+a.pfx+"-transform";
	g=!0;
	break a}
g=!1}
b.transitions=g;
	""!==c.controlsContainer&&(a.controlsContainer=0<d(c.controlsContainer).length&&d(c.controlsContainer));
	""!==c.manualControls&&(a.manualControls=0<d(c.manualControls).length&&d(c.manualControls));
	c.randomize&&(a.slides.sort(function(){
	return Math.round(Math.random())-0.5}
),a.container.empty().append(a.slides));
	a.doMath();
	s&&f.asNav.setup();
	a.setup("init");
	c.controlNav&&f.controlNav.setup();
	c.directionNav&&f.directionNav.setup();
	c.keyboard&& (1===d(a.containerSelector).length||c.multipleKeyboard)&&d(document).bind("keyup",function(b){
	b=b.keyCode;
	if(!a.animating&&(39===b||37===b))b=39===b?a.getTarget("next"):37===b?a.getTarget("prev"):!1,a.flexAnimate(b,c.pauseOnAction)}
);
	c.mousewheel&&a.bind("mousewheel",function(b,g){
	b.preventDefault();
	var d=0>g?a.getTarget("next"):a.getTarget("prev");
	a.flexAnimate(d,c.pauseOnAction)}
);
	c.pausePlay&&f.pausePlay.setup();
	c.slideshow&&(c.pauseOnHover&&a.hover(function(){
	!a.manualPlay&&!a.manualPause&&a.pause()}
,function(){
	!a.manualPause&&!a.manualPlay&&a.play()}
),0<c.initDelay?setTimeout(a.play,c.initDelay):a.play());
	p&&c.touch&&f.touch();
	(!r||r&&c.smoothHeight)&&d(window).bind("resize focus",f.resize);
	setTimeout(function(){
	c.start(a)}
,200)}
,asNav:{
	setup:function(){
	a.asNav=!0;
	a.animatingTo=Math.floor(a.currentSlide/a.move);
	a.currentItem=a.currentSlide;
	a.slides.removeClass(e+"active-slide").eq(a.currentItem).addClass(e+"active-slide");
	a.slides.click(function(b){
	b.preventDefault();
	var b=d(this),g=b.index();
	!d(c.asNavFor).data("flexslider").animating&&!b.hasClass("active")&&(a.direction=a.currentItem<g?"next":"prev",a.flexAnimate(g,c.pauseOnAction,!1,!0,!0))}
)}
}
,controlNav:{
	setup:function(){
	a.manualControls?f.controlNav.setupManual():f.controlNav.setupPaging()}
,setupPaging:function(){
	var b=1,g;
	a.controlNavScaffold=d('<ol class="'+e+"control-nav "+e+("thumbnails"===c.controlNav?"control-thumbs":"control-paging")+'"></ol>');
	if(1<a.pagingCount)for(var n=0;
	n<a.pagingCount;
	n++)g="thumbnails"===c.controlNav? '<img src="'+a.slides.eq(n).attr("data-thumb")+'"/>':"<a>"+b+"</a>",a.controlNavScaffold.append("<li>"+g+"</li>"),b++;
	a.controlsContainer?d(a.controlsContainer).append(a.controlNavScaffold):a.append(a.controlNavScaffold);
	f.controlNav.set();
	f.controlNav.active();
	a.controlNavScaffold.delegate("a,img",t,function(b){
	b.preventDefault();
	var b=d(this),g=a.controlNav.index(b);
	b.hasClass(e+"active")||(a.direction=g>a.currentSlide?"next":"prev",a.flexAnimate(g,c.pauseOnAction))}
);
	p&&a.controlNavScaffold.delegate("a","click touchstart",function(a){
	a.preventDefault()}
)}
,setupManual:function(){
	a.controlNav=a.manualControls;
	f.controlNav.active();
	a.controlNav.live(t,function(b){
	b.preventDefault();
	var b=d(this),g=a.controlNav.index(b);
	b.hasClass(e+"active")||(g>a.currentSlide?a.direction="next":a.direction="prev",a.flexAnimate(g,c.pauseOnAction))}
);
	p&&a.controlNav.live("click touchstart",function(a){
	a.preventDefault()}
)}
,set:function(){
	a.controlNav=d("."+e+"control-nav li "+("thumbnails"===c.controlNav?"img":"a"),a.controlsContainer?a.controlsContainer:a)}
,active:function(){
	a.controlNav.removeClass(e+"active").eq(a.animatingTo).addClass(e+"active")}
,update:function(b,c){
	1<a.pagingCount&&"add"===b?a.controlNavScaffold.append(d("<li><a>"+a.count+"</a></li>")):1===a.pagingCount?a.controlNavScaffold.find("li").remove():a.controlNav.eq(c).closest("li").remove();
	f.controlNav.set();
	1<a.pagingCount&&a.pagingCount!==a.controlNav.length?a.update(c,b):f.controlNav.active()}
}
,directionNav:{
	setup:function(){
	var b=d('<ul class="'+ e+'direction-nav"><li><a class="'+e+'prev" href="#">'+c.prevText+'</a></li><li><a class="'+e+'next" href="#">'+c.nextText+"</a></li></ul>");
	a.controlsContainer?(d(a.controlsContainer).append(b),a.directionNav=d("."+e+"direction-nav li a",a.controlsContainer)):(a.append(b),a.directionNav=d("."+e+"direction-nav li a",a));
	f.directionNav.update();
	a.directionNav.bind(t,function(b){
	b.preventDefault();
	b=d(this).hasClass(e+"next")?a.getTarget("next"):a.getTarget("prev");
	a.flexAnimate(b,c.pauseOnAction)}
);
	p&&a.directionNav.bind("click touchstart",function(a){
	a.preventDefault()}
)}
,update:function(){
	var b=e+"disabled";
	1===a.pagingCount?a.directionNav.addClass(b):c.animationLoop?a.directionNav.removeClass(b):0===a.animatingTo?a.directionNav.removeClass(b).filter("."+e+"prev").addClass(b):a.animatingTo===a.last?a.directionNav.removeClass(b).filter("."+e+"next").addClass(b):a.directionNav.removeClass(b)}
}
,pausePlay:{
	setup:function(){
	var b=d('<div class="'+e+'pauseplay"><a></a></div>');
	a.controlsContainer? (a.controlsContainer.append(b),a.pausePlay=d("."+e+"pauseplay a",a.controlsContainer)):(a.append(b),a.pausePlay=d("."+e+"pauseplay a",a));
	f.pausePlay.update(c.slideshow?e+"pause":e+"play");
	a.pausePlay.bind(t,function(b){
	b.preventDefault();
	d(this).hasClass(e+"pause")?(a.manualPause=!0,a.manualPlay=!1,a.pause()):(a.manualPause=!1,a.manualPlay=!0,a.play())}
);
	p&&a.pausePlay.bind("click touchstart",function(a){
	a.preventDefault()}
)}
,update:function(b){
	"play"===b?a.pausePlay.removeClass(e+"pause").addClass(e+ "play").text(c.playText):a.pausePlay.removeClass(e+"play").addClass(e+"pause").text(c.pauseText)}
}
,touch:function(){
	function b(b){
	j=l?d-b.touches[0].pageY:d-b.touches[0].pageX;
	p=l?Math.abs(j)<Math.abs(b.touches[0].pageX-e):Math.abs(j)<Math.abs(b.touches[0].pageY-e);
	if(!p||500<Number(new Date)-k)b.preventDefault(),!r&&a.transitions&&(c.animationLoop||(j/=0===a.currentSlide&&0>j||a.currentSlide===a.last&&0<j?Math.abs(j)/q+2:1),a.setProps(f+j,"setTouch"))}
function g(){
	i.removeEventListener("touchmove",b,!1);
	if(a.animatingTo===a.currentSlide&&!p&&null!==j){
	var h=m?-j:j,l=0<h?a.getTarget("next"):a.getTarget("prev");
	a.canAdvance(l)&&(550>Number(new Date)-k&&50<Math.abs(h)||Math.abs(h)>q/2)?a.flexAnimate(l,c.pauseOnAction):r||a.flexAnimate(a.currentSlide,c.pauseOnAction,!0)}
i.removeEventListener("touchend",g,!1);
	f=j=e=d=null}
var d,e,f,q,j,k,p=!1;
	i.addEventListener("touchstart",function(j){
	a.animating?j.preventDefault():1===j.touches.length&&(a.pause(),q=l?a.h:a.w,k=Number(new Date),f=h&&m&&a.animatingTo=== a.last?0:h&&m?a.limit-(a.itemW+c.itemMargin)*a.move*a.animatingTo:h&&a.currentSlide===a.last?a.limit:h?(a.itemW+c.itemMargin)*a.move*a.currentSlide:m?(a.last-a.currentSlide+a.cloneOffset)*q:(a.currentSlide+a.cloneOffset)*q,d=l?j.touches[0].pageY:j.touches[0].pageX,e=l?j.touches[0].pageX:j.touches[0].pageY,i.addEventListener("touchmove",b,!1),i.addEventListener("touchend",g,!1))}
,!1)}
,resize:function(){
	!a.animating&&a.is(":visible")&&(h||a.doMath(),r?f.smoothHeight():h?(a.slides.width(a.computedW),a.update(a.pagingCount),a.setProps()):l?(a.viewport.height(a.h),a.setProps(a.h,"setTotal")):(c.smoothHeight&&f.smoothHeight(),a.newSlides.width(a.computedW),a.setProps(a.computedW,"setTotal")))}
,smoothHeight:function(b){
	if(!l||r){
	var c=r?a:a.viewport;
	b?c.animate({
	height:a.slides.eq(a.animatingTo).height()}
,b):c.height(a.slides.eq(a.animatingTo).height())}
}
,sync:function(b){
	var g=d(c.sync).data("flexslider"),e=a.animatingTo;
	switch(b){
	case "animate":g.flexAnimate(e,c.pauseOnAction,!1,!0);
	break;
	case "play":!g.playing&& !g.asNav&&g.play();
	break;
	case "pause":g.pause()}
}
}
;
	a.flexAnimate=function(b,g,n,i,k){
	s&&1===a.pagingCount&&(a.direction=a.currentItem<b?"next":"prev");
	if(!a.animating&&(a.canAdvance(b,k)||n)&&a.is(":visible")){
	if(s&&i)if(n=d(c.asNavFor).data("flexslider"),a.atEnd=0===b||b===a.count-1,n.flexAnimate(b,!0,!1,!0,k),a.direction=a.currentItem<b?"next":"prev",n.direction=a.direction,Math.ceil((b+1)/a.visible)-1!==a.currentSlide&&0!==b)a.currentItem=b,a.slides.removeClass(e+"active-slide").eq(b).addClass(e+ "active-slide"),b=Math.floor(b/a.visible);
	else return a.currentItem=b,a.slides.removeClass(e+"active-slide").eq(b).addClass(e+"active-slide"),!1;
	a.animating=!0;
	a.animatingTo=b;
	c.before(a);
	g&&a.pause();
	a.syncExists&&!k&&f.sync("animate");
	c.controlNav&&f.controlNav.active();
	h||a.slides.removeClass(e+"active-slide").eq(b).addClass(e+"active-slide");
	a.atEnd=0===b||b===a.last;
	c.directionNav&&f.directionNav.update();
	b===a.last&&(c.end(a),c.animationLoop||a.pause());
	if(r)p?(a.slides.eq(a.currentSlide).css({
	opacity:0,zIndex:1}
),a.slides.eq(b).css({
	opacity:1,zIndex:2}
),a.slides.unbind("webkitTransitionEnd transitionend"),a.slides.eq(a.currentSlide).bind("webkitTransitionEnd transitionend",function(){
	c.after(a)}
),a.animating=!1,a.currentSlide=a.animatingTo):(a.slides.eq(a.currentSlide).fadeOut(c.animationSpeed,c.easing),a.slides.eq(b).fadeIn(c.animationSpeed,c.easing,a.wrapup));
	else{
	var q=l?a.slides.filter(":first").height():a.computedW;
	h?(b=c.itemWidth>a.w?2*c.itemMargin:c.itemMargin,b=(a.itemW+b)*a.move*a.animatingTo,b=b>a.limit&&1!==a.visible?a.limit:b):b=0===a.currentSlide&&b===a.count-1&&c.animationLoop&&"next"!==a.direction?m?(a.count+a.cloneOffset)*q:0:a.currentSlide===a.last&&0===b&&c.animationLoop&&"prev"!==a.direction?m?0:(a.count+1)*q:m?(a.count-1-b+a.cloneOffset)*q:(b+a.cloneOffset)*q;
	a.setProps(b,"",c.animationSpeed);
	if(a.transitions){
	if(!c.animationLoop||!a.atEnd)a.animating=!1,a.currentSlide=a.animatingTo;
	a.container.unbind("webkitTransitionEnd transitionend");
	a.container.bind("webkitTransitionEnd transitionend",function(){
	a.wrapup(q)}
)}
else a.container.animate(a.args,c.animationSpeed,c.easing,function(){
	a.wrapup(q)}
)}
c.smoothHeight&&f.smoothHeight(c.animationSpeed)}
}
;
	a.wrapup=function(b){
	!r&&!h&&(0===a.currentSlide&&a.animatingTo===a.last&&c.animationLoop?a.setProps(b,"jumpEnd"):a.currentSlide===a.last&&(0===a.animatingTo&&c.animationLoop)&&a.setProps(b,"jumpStart"));
	a.animating=!1;
	a.currentSlide=a.animatingTo;
	c.after(a)}
;
	a.animateSlides=function(){
	a.animating||a.flexAnimate(a.getTarget("next"))}
;
	a.pause= function(){
	clearInterval(a.animatedSlides);
	a.playing=!1;
	c.pausePlay&&f.pausePlay.update("play");
	a.syncExists&&f.sync("pause")}
;
	a.play=function(){
	a.animatedSlides=setInterval(a.animateSlides,c.slideshowSpeed);
	a.playing=!0;
	c.pausePlay&&f.pausePlay.update("pause");
	a.syncExists&&f.sync("play")}
;
	a.canAdvance=function(b,g){
	var d=s?a.pagingCount-1:a.last;
	return g?!0:s&&a.currentItem===a.count-1&&0===b&&"prev"===a.direction?!0:s&&0===a.currentItem&&b===a.pagingCount-1&&"next"!==a.direction?!1:b===a.currentSlide&& !s?!1:c.animationLoop?!0:a.atEnd&&0===a.currentSlide&&b===d&&"next"!==a.direction?!1:a.atEnd&&a.currentSlide===d&&0===b&&"next"===a.direction?!1:!0}
;
	a.getTarget=function(b){
	a.direction=b;
	return"next"===b?a.currentSlide===a.last?0:a.currentSlide+1:0===a.currentSlide?a.last:a.currentSlide-1}
;
	a.setProps=function(b,g,d){
	var e,f=b?b:(a.itemW+c.itemMargin)*a.move*a.animatingTo;
	e=-1*function(){
	if(h)return"setTouch"===g?b:m&&a.animatingTo===a.last?0:m?a.limit-(a.itemW+c.itemMargin)*a.move*a.animatingTo:a.animatingTo=== a.last?a.limit:f;
	switch(g){
	case "setTotal":return m?(a.count-1-a.currentSlide+a.cloneOffset)*b:(a.currentSlide+a.cloneOffset)*b;
	case "setTouch":return b;
	case "jumpEnd":return m?b:a.count*b;
	case "jumpStart":return m?a.count*b:b;
	default:return b}
}
()+"px";
	a.transitions&&(e=l?"translate3d(0,"+e+",0)":"translate3d("+e+",0,0)",d=void 0!==d?d/1E3+"s":"0s",a.container.css("-"+a.pfx+"-transition-duration",d));
	a.args[a.prop]=e;
	(a.transitions||void 0===d)&&a.container.css(a.args)}
;
	a.setup=function(b){
	if(r)a.slides.css({
	width:"100%","float":"left",marginRight:"-100%",position:"relative"}
),"init"===b&&(p?a.slides.css({
	opacity:0,display:"block",webkitTransition:"opacity "+c.animationSpeed/1E3+"s ease",zIndex:1}
).eq(a.currentSlide).css({
	opacity:1,zIndex:2}
):a.slides.eq(a.currentSlide).fadeIn(c.animationSpeed,c.easing)),c.smoothHeight&&f.smoothHeight();
	else{
	var g,n;
	"init"===b&&(a.viewport=d('<div class="'+e+'viewport"></div>').css({
	overflow:"hidden",position:"relative"}
).appendTo(a).append(a.container),a.cloneCount=0,a.cloneOffset= 0,m&&(n=d.makeArray(a.slides).reverse(),a.slides=d(n),a.container.empty().append(a.slides)));
	c.animationLoop&&!h&&(a.cloneCount=2,a.cloneOffset=1,"init"!==b&&a.container.find(".clone").remove(),a.container.append(a.slides.first().clone().addClass("clone")).prepend(a.slides.last().clone().addClass("clone")));
	a.newSlides=d(c.selector,a);
	g=m?a.count-1-a.currentSlide+a.cloneOffset:a.currentSlide+a.cloneOffset;
	l&&!h?(a.container.height(200*(a.count+a.cloneCount)+"%").css("position","absolute").width("100%"),setTimeout(function(){
	a.newSlides.css({
	display:"block"}
);
	a.doMath();
	a.viewport.height(a.h);
	a.setProps(g*a.h,"init")}
,"init"===b?100:0)):(a.container.width(200*(a.count+a.cloneCount)+"%"),a.setProps(g*a.computedW,"init"),setTimeout(function(){
	a.doMath();
	a.newSlides.css({
	width:a.computedW,"float":"left",display:"block"}
);
	c.smoothHeight&&f.smoothHeight()}
,"init"===b?100:0))}
h||a.slides.removeClass(e+"active-slide").eq(a.currentSlide).addClass(e+"active-slide")}
;
	a.doMath=function(){
	var b=a.slides.first(),d=c.itemMargin,e=c.minItems,f=c.maxItems;
	a.w=a.width();
	a.h=b.height();
	a.boxPadding=b.outerWidth()-b.width();
	h?(a.itemT=c.itemWidth+d,a.minW=e?e*a.itemT:a.w,a.maxW=f?f*a.itemT:a.w,a.itemW=a.minW>a.w?(a.w-d*e)/e:a.maxW<a.w?(a.w-d*f)/f:c.itemWidth>a.w?a.w:c.itemWidth,a.visible=Math.floor(a.w/(a.itemW+d)),a.move=0<c.move&&c.move<a.visible?c.move:a.visible,a.pagingCount=Math.ceil((a.count-a.visible)/a.move+1),a.last=a.pagingCount-1,a.limit=1===a.pagingCount?0:c.itemWidth>a.w?(a.itemW+2*d)*a.count-a.w- d:(a.itemW+d)*a.count-a.w-d):(a.itemW=a.w,a.pagingCount=a.count,a.last=a.count-1);
	a.computedW=a.itemW-a.boxPadding}
;
	a.update=function(b,d){
	a.doMath();
	h||(b<a.currentSlide?a.currentSlide+=1:b<=a.currentSlide&&0!==b&&(a.currentSlide-=1),a.animatingTo=a.currentSlide);
	if(c.controlNav&&!a.manualControls)if("add"===d&&!h||a.pagingCount>a.controlNav.length)f.controlNav.update("add");
	else if("remove"===d&&!h||a.pagingCount<a.controlNav.length)h&&a.currentSlide>a.last&&(a.currentSlide-=1,a.animatingTo-=1),f.controlNav.update("remove",a.last);
	c.directionNav&&f.directionNav.update()}
;
	a.addSlide=function(b,e){
	var f=d(b);
	a.count+=1;
	a.last=a.count-1;
	l&&m?void 0!==e?a.slides.eq(a.count-e).after(f):a.container.prepend(f):void 0!==e?a.slides.eq(e).before(f):a.container.append(f);
	a.update(e,"add");
	a.slides=d(c.selector+":not(.clone)",a);
	a.setup();
	c.added(a)}
;
	a.removeSlide=function(b){
	var e=isNaN(b)?a.slides.index(d(b)):b;
	a.count-=1;
	a.last=a.count-1;
	isNaN(b)?d(b,a.slides).remove():l&&m?a.slides.eq(a.last).remove():a.slides.eq(b).remove();
	a.doMath();
	a.update(e,"remove");
	a.slides=d(c.selector+":not(.clone)",a);
	a.setup();
	c.removed(a)}
;
	f.init()}
;
	d.flexslider.defaults={
	namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:!1,animationLoop:!0,smoothHeight:!1,startAt:0,slideshow:!0,slideshowSpeed:3000,animationSpeed:400,initDelay:0,randomize:!1,pauseOnAction:!0,pauseOnHover:!0,useCSS:!0,touch:!0,video:!1,controlNav:!0,directionNav:!0,prevText:"Previous",nextText:"Next",keyboard:!0,multipleKeyboard:!1,mousewheel:!1,pausePlay:!1,pauseText:"Pause",playText:"Play",controlsContainer:"",manualControls:"",sync:"",asNavFor:"",itemWidth:0,itemMargin:0,minItems:0,maxItems:0,move:0,start:function(){
}
,before:function(){
}
,after:function(){
}
,end:function(){
}
,added:function(){
}
,removed:function(){
}
}
;
	d.fn.flexslider=function(i){
	void 0===i&&(i={
}
);
	if("object"===typeof i)return this.each(function(){
	var a=d(this),c=a.find(i.selector?i.selector:".slides > li");
	1===c.length?(c.fadeIn(400),i.start&&i.start(a)):void 0==a.data("flexslider")&&new d.flexslider(this,i)}
);
	var k=d(this).data("flexslider");
	switch(i){
	case "play":k.play();
	break;
	case "pause":k.pause();
	break;
	case "next":k.flexAnimate(k.getTarget("next"),!0);
	break;
	case "prev":case "previous":k.flexAnimate(k.getTarget("prev"),!0);
	break;
	default:"number"===typeof i&&k.flexAnimate(i,!0)}
}
}
)(jQuery);

CSS代码(zzsc.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
/* Globe Font Control */
body,table,input,textarea,button,select{font-family:Tahoma,'simsun';font-size:12px;}
body{font-family:"Microsoft Yahei","??圆",Tahoma,'simsun';font-size:14px;}
.head{background-color:#F7F7F7;height:106px;}
.head-cont{margin:0 auto;overflow:hidden;position:relative;width:960px;}
h1{float:left;height:82px;line-height:82px;}
.logo,.logo-des,.ctrl-l,.ctrl-r{text-indent:-99em;}
.logo{background:url(../images/logo.png) no-repeat;display:inline-block;.display:block;.float:left;height:62px;margin-top:20px;width:213px;}
.logo-des{background:url(../images/logo_des.png) no-repeat;display:inline-block;.display:block;.float:left;height:24px;*margin-top:40px;margin-left:12px;width:231px;}
.top-nav{float:right;font-size:0;margin-top:29px;position:relative;z-index:1;}
.top-nav a{color:#000;cursor:pointer;display:inline-block;font-size:18px;height:40px;line-height:40px;text-align:center;text-decoration:none;width:111px;padding-right:4px;}
.top-nav a.current{background:url(../images/top_nav_active.png) no-repeat;color:#fff;}
.main{margin:0 auto;width:960px;}
.pro-switch{height:450px;overflow:hidden;position:relative;width:960px;}
.flexslider{margin:0;padding:0;}
.flexslider .slides > li{display:none;-webkit-backface-visibility:hidden;}
.flexslider .slides img{width:100%;display:block;}
.slides:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .slides{display:block;}
* html .slides{height:450px;}
.no-js .slides > li:first-child{display:block;}
.flexslider{margin:0 auto;position:relative;width:960px;zoom:1;}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;}
.flexslider .slides{zoom:1;}
.flex-direction-nav{*height:0;}
.flex-direction-nav a{width:60px;height:90px;margin:-60px 0 0;display:block;background:url(../images/ad_ctr.png) no-repeat 0 0;position:absolute;top:50%;z-index:10;cursor:pointer;text-indent:-9999px;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .3s ease;}
.flex-direction-nav .flex-next{background-position:0 -90px;right:0;}
.flex-direction-nav .flex-prev{left:0;}
.flexslider:hover .flex-next{opacity:0.8;filter:alpha(opacity=25);}
.flexslider:hover .flex-prev{opacity:0.8;filter:alpha(opacity=25);}
.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50);}
.flex-control-nav{width:100%;position:absolute;bottom:10px;text-align:center;}
.flex-control-nav li{margin:0 5px;display:inline-block;zoom:1;*display:inline;}
.flex-control-paging li a{background:url(../images/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer;}
.flex-control-paging li a.flex-active{background-position:0 0;}
#j_tslm{border-bottom:1px solid #E2E2E3;margin-top:22px;overflow:hidden;padding-bottom:40px;*padding-bottom:20px;}
.mod-tit{background:no-repeat;color:#303236;font-size:28px;height:50px;line-height:50px;margin:32px 0;padding-left:60px;}
.tszl{background-image:url(../images/tit_tslm.png);}
.about{background-image:url(../images/tit_about.png);}
.pro-list{font-size:0;}
.pro-list li{background-color:#11b4fe;border:4px solid #d3d5db;display:inline-block;*float:left;height:120px;margin-right:38px;width:120px;}
.pro-list li.last{margin-right:0;}
.news-mod-cont{background-color:#f7f7f7;overflow:hidden;padding:30px;_zoom:1;}
.news-mod{width:342px;}
.news-mod-tit{background:url(../images/line.png) no-repeat 0 100%;color:#3e3f43;font-size:16px;font-weight:700;margin-bottom:15px;padding-bottom:12px;}
.more,.fr{float:right;}
.more{color:#168eff;text-decoration:none;}
.fl{float:left;}
.date{color:#7b7b7b;float:right;}
.txt-list li,.news-list li{color:#3e3f43;display:block;padding:6px 0;}
.news-list li a,.txt-list li a{color:#2c6ba6;text-decoration:none;}
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
#j_tslm ul li{width:128px;height:128px;border:0;background-color:transparent;}
#j_tslm ul a{width:128px;height:128px;display:block;position:relative;z-index:0;text-decoration:none}
#j_tslm ul div{position:absolute;top:0;left:0;width:120px;height:120px;border:4px solid #d3d5db;}
#j_tslm a .front{z-index:2;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform .3s linear;-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;-moz-transition:-moz-transform .3s linear;-o-transform-style:preserve-3d;-o-backface-visibility:hidden;-o-transition:-moz-transform .3s linear;}
#j_tslm a .back{z-index:1;-webkit-transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform .3s linear;-moz-transform:rotateY(-180deg);-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;-moz-transition:-moz-transform .3s linear;-o-transform:rotateY(-180deg);-o-transform-style:preserve-3d;-o-backface-visibility:hidden;-o-transition:-o-transform .3s linear;-ms-transform:rotateY(-180deg);-ms-transform-style:preserve-3d;-ms-backface-visibility:hidden;-ms-transition:-ms-transform .3s linear;}
#j_tslm a:hover .front{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);}
#j_tslm a:hover .back{z-index:3;zoom:1;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);}
#footer{width:950px;margin:50px auto;text-align:center;line-height:1.5;color:#9e9e9e;}
#footer a{color:#9e9e9e;text-decoration:none;}

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