猎豹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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为猎豹jQuery全屏焦点图代码" />
<title>猎豹jQuery全屏焦点图代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" src="js/belatedPNG.js"></script>
<script type="text/javascript">
    var __IE6=true;
    DD_belatedPNG.fix('.logo img,.prev img,.next img,img');
</script>
<![endif]-->
</head>
<body>
<!-- 代码 开始 -->
<div class="slide-main" id="touchMain">
	<a class="prev" href="javascript:;" stat="prev1001"><img src="images/l-btn.png" /></a>
	<div class="slide-box" id="slideContent">
		<div class="slide" id="bgstylec">
			<a stat="sslink-3" href="#" target="_blank">
				<div class="obj-e"><img src="images/baomi-t-1.png" /></div>
				<div class="obj-f"><img src="images/baomi-kl.jpg" /></div>
			</a>
		</div>
		<div class="slide" id="bgstylea">
			<a stat="sslink-1" href="#" target="_blank">
				<div class="obj-a"><img src="images/bao.png" /></div>
				<div class="obj-b"><img src="images/nt-1.png" /></div>
			</a>
		</div>
		<div class="slide" id="bgstyleb">
			<a stat="sslink-2" href="#" target="_blank">
				<div class="obj-c"><img src="images/bao-2.png" /></div>
				<div class="obj-d"><img src="images/st-2.png" /><p>全新chrome内核，内存占用最低，轻巧炫酷皮肤</p></div>
			</a>
		</div>
	</div>
	<a class="next" href="javascript:;" stat="next1002"><img src="images/r-btn.png" /></a>
	<div class="item">
		<a class="cur" stat="item1001" href="javascript:;"></a><a href="javascript:;" stat="item1002"></a><a href="javascript:;" stat="item1003"></a>
	</div>
</div>
</body>
</html>

JS代码(belatedPNG.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**/
/*PLEASE READ:Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense,so neither does this code!*/
var DD_belatedPNG ={
	ns:'DD_belatedPNG',imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function (){
	/* enable VML */
if (document.namespaces && !document.namespaces[this.ns]){
	document.namespaces.add(this.ns,'urn:schemas-microsoft-com:vml');
}
}
,createVmlStyleSheet:function (){
	/* style VML,enable behaviors */
/*Just in case lots of other developers have addedlots of other stylesheets using document.createStyleSheetand hit the 31-limit mark,let's not use that method!further reading:http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx*/
var screenStyleSheet,printStyleSheet;
	screenStyleSheet = document.createElement('style');
	screenStyleSheet.setAttribute('media','screen');
	document.documentElement.firstChild.insertBefore(screenStyleSheet,document.documentElement.firstChild.firstChild);
	if (screenStyleSheet.styleSheet){
	screenStyleSheet = screenStyleSheet.styleSheet;
	screenStyleSheet.addRule(this.ns + '\\:*','{
	behavior:url(#default#VML)}
');
	screenStyleSheet.addRule(this.ns + '\\:shape','position:absolute;
	');
	screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder','behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	');
	/* large negative top value for avoiding vertical scrollbars for large images,suggested by James O'Brien,http://www.thanatopsic.org/hendrik/ */
this.screenStyleSheet = screenStyleSheet;
	/* Add a print-media stylesheet,for preventing VML artifacts from showing up in print (including preview). */
/* Thanks to R閙i Pr関ost for automating this! */
printStyleSheet = document.createElement('style');
	printStyleSheet.setAttribute('media','print');
	document.documentElement.firstChild.insertBefore(printStyleSheet,document.documentElement.firstChild.firstChild);
	printStyleSheet = printStyleSheet.styleSheet;
	printStyleSheet.addRule(this.ns + '\\:*','{
	display:none !important;
}
');
	printStyleSheet.addRule('img.' + this.ns + '_sizeFinder','{
	display:none !important;
}
');
}
}
,readPropertyChange:function (){
	var el,display,v;
	el = event.srcElement;
	if (!el.vmlInitiated){
	return;
}
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1){
	DD_belatedPNG.applyVML(el);
}
if (event.propertyName == 'style.display'){
	display = (el.currentStyle.display == 'none') ? 'none':'block';
	for (v in el.vml){
	if (el.vml.hasOwnProperty(v)){
	el.vml[v].shape.style.display = display;
}
}
}
if (event.propertyName.search('filter') != -1){
	DD_belatedPNG.vmlOpacity(el);
}
}
,vmlOpacity:function (el){
	if (el.currentStyle.filter.search('lpha') != -1){
	var trans = el.currentStyle.filter;
	trans = parseInt(trans.substring(trans.lastIndexOf('=')+1,trans.lastIndexOf(')')),10)/100;
	el.vml.color.shape.style.filter = el.currentStyle.filter;
	/* complete guesswork */
el.vml.image.fill.opacity = trans;
	/* complete guesswork */
}
}
,handlePseudoHover:function (el){
	setTimeout(function (){
	/* wouldn't work as intended without setTimeout */
DD_belatedPNG.applyVML(el);
}
,1);
}
,/*** This is the method to use in a document.* @param{
	String}
selector - REQUIRED - a CSS selector,such as '#doc .container'**/
fix:function (selector){
	if (this.screenStyleSheet){
	var selectors,i;
	selectors = selector.split(',');
	/* multiple selectors supported,no need for multiple calls to this anymore */
for (i=0;
	i<selectors.length;
	i++){
	this.screenStyleSheet.addRule(selectors[i],'behavior:expression(DD_belatedPNG.fixPng(this))');
	/* seems to execute the function without adding it to the stylesheet - interesting... */
}
}
}
,applyVML:function (el){
	el.runtimeStyle.cssText = '';
	this.vmlFill(el);
	this.vmlOffsets(el);
	this.vmlOpacity(el);
	if (el.isImg){
	this.copyImageBorders(el);
}
}
,attachHandlers:function (el){
	var self,handlers,handler,moreForAs,a,h;
	self = this;
	handlers ={
	resize:'vmlOffsets',move:'vmlOffsets'}
;
	if (el.nodeName == 'A'){
	moreForAs ={
	mouseleave:'handlePseudoHover',mouseenter:'handlePseudoHover',focus:'handlePseudoHover',blur:'handlePseudoHover'}
;
	for (a in moreForAs){
	if (moreForAs.hasOwnProperty(a)){
	handlers[a] = moreForAs[a];
}
}
}
for (h in handlers){
	if (handlers.hasOwnProperty(h)){
	handler = function (){
	self[handlers[h]](el);
}
;
	el.attachEvent('on' + h,handler);
}
}
el.attachEvent('onpropertychange',this.readPropertyChange);
}
,giveLayout:function (el){
	el.style.zoom = 1;
	if (el.currentStyle.position == 'static'){
	el.style.position = 'relative';
}
}
,copyImageBorders:function (el){
	var styles,s;
	styles ={
	'borderStyle':true,'borderWidth':true,'borderColor':true}
;
	for (s in styles){
	if (styles.hasOwnProperty(s)){
	el.vml.color.shape.style[s] = el.currentStyle[s];
}
}
}
,vmlFill:function (el){
	if (!el.currentStyle){
	return;
}
else{
	var elStyle,noImg,lib,v,img,imgLoaded;
	elStyle = el.currentStyle;
}
for (v in el.vml){
	if (el.vml.hasOwnProperty(v)){
	el.vml[v].shape.style.zIndex = elStyle.zIndex;
}
}
el.runtimeStyle.backgroundColor = '';
	el.runtimeStyle.backgroundImage = '';
	noImg = true;
	if (elStyle.backgroundImage != 'none' || el.isImg){
	if (!el.isImg){
	el.vmlBg = elStyle.backgroundImage;
	el.vmlBg = el.vmlBg.substr(5,el.vmlBg.lastIndexOf('")')-5);
}
else{
	el.vmlBg = el.src;
}
lib = this;
	if (!lib.imgSize[el.vmlBg]){
	/* determine size of loaded image */
img = document.createElement('img');
	lib.imgSize[el.vmlBg] = img;
	img.className = lib.ns + '_sizeFinder';
	img.runtimeStyle.cssText = 'behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	';
	/* make sure to set behavior to none to prevent accidental matching of the helper elements! */
imgLoaded = function (){
	this.width = this.offsetWidth;
	/* weird cache-busting requirement! */
this.height = this.offsetHeight;
	lib.vmlOffsets(el);
}
;
	img.attachEvent('onload',imgLoaded);
	img.src = el.vmlBg;
	img.removeAttribute('width');
	img.removeAttribute('height');
	document.body.insertBefore(img,document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
	noImg = false;
}
el.vml.image.fill.on = !noImg;
	el.vml.image.fill.color = 'none';
	el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
	el.runtimeStyle.backgroundImage = 'none';
	el.runtimeStyle.backgroundColor = 'transparent';
}
,/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1,and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
vmlOffsets:function (el){
	var thisStyle,size,fudge,makeVisible,bg,bgR,dC,altC,b,c,v;
	thisStyle = el.currentStyle;
	size ={
	'W':el.clientWidth+1,'H':el.clientHeight+1,'w':this.imgSize[el.vmlBg].width,'h':this.imgSize[el.vmlBg].height,'L':el.offsetLeft,'T':el.offsetTop,'bLW':el.clientLeft,'bTW':el.clientTop}
;
	fudge = (size.L + size.bLW == 1) ? 1:0;
	/* vml shape,left,top,width,height,origin */
makeVisible = function (vml,l,t,w,h,o){
	vml.coordsize = w+','+h;
	vml.coordorigin = o+','+o;
	vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
	vml.style.width = w + 'px';
	vml.style.height = h + 'px';
	vml.style.left = l + 'px';
	vml.style.top = t + 'px';
}
;
	makeVisible(el.vml.color.shape,(size.L + (el.isImg ? 0:size.bLW)),(size.T + (el.isImg ? 0:size.bTW)),(size.W-1),(size.H-1),0);
	makeVisible(el.vml.image.shape,(size.L + size.bLW),(size.T + size.bTW),(size.W),(size.H),1 );
	bg ={
	'X':0,'Y':0}
;
	if (el.isImg){
	bg.X = parseInt(thisStyle.paddingLeft,10) + 1;
	bg.Y = parseInt(thisStyle.paddingTop,10) + 1;
}
else{
	for (b in bg){
	if (bg.hasOwnProperty(b)){
	this.figurePercentage(bg,size,b,thisStyle['backgroundPosition'+b]);
}
}
}
el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
	bgR = thisStyle.backgroundRepeat;
	dC ={
	'T':1,'R':size.W+fudge,'B':size.H,'L':1+fudge}
;
	/* these are defaults for repeat of any kind */
altC ={
	'X':{
	'b1':'L','b2':'R','d':'W'}
,'Y':{
	'b1':'T','b2':'B','d':'H'}
}
;
	if (bgR != 'repeat' || el.isImg){
	c ={
	'T':(bg.Y),'R':(bg.X+size.w),'B':(bg.Y+size.h),'L':(bg.X)}
;
	/* these are defaults for no-repeat - clips down to the image location */
if (bgR.search('repeat-') != -1){
	/* now let's revert to dC for repeat-x or repeat-y */
v = bgR.split('repeat-')[1].toUpperCase();
	c[altC[v].b1] = 1;
	c[altC[v].b2] = size[altC[v].d];
}
if (c.B > size.H){
	c.B = size.H;
}
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
}
else{
	el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
}
}
,figurePercentage:function (bg,size,axis,position){
	var horizontal,fraction;
	fraction = true;
	horizontal = (axis == 'X');
	switch(position){
	case 'left':case 'top':bg[axis] = 0;
	break;
	case 'center':bg[axis] = 0.5;
	break;
	case 'right':case 'bottom':bg[axis] = 1;
	break;
	default:if (position.search('%') != -1){
	bg[axis] = parseInt(position,10) / 100;
}
else{
	fraction = false;
}
}
bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W':'H'] * bg[axis]) - (size[horizontal?'w':'h'] * bg[axis]) ):parseInt(position,10) );
	if (bg[axis] % 2 === 0){
	bg[axis]++;
}
return bg[axis];
}
,fixPng:function (el){
	el.style.behavior = 'none';
	var lib,els,nodeStr,v,e;
	if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR'){
	/* elements not supported yet */
return;
}
el.isImg = false;
	if (el.nodeName == 'IMG'){
	if(el.src.toLowerCase().search(/\.png$/) != -1){
	el.isImg = true;
	el.style.visibility = 'hidden';
}
else{
	return;
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1){
	return;
}
lib = DD_belatedPNG;
	el.vml ={
	color:{
}
,image:{
}
}
;
	els ={
	shape:{
}
,fill:{
}
}
;
	for (v in el.vml){
	if (el.vml.hasOwnProperty(v)){
	for (e in els){
	if (els.hasOwnProperty(e)){
	nodeStr = lib.ns + ':' + e;
	el.vml[v][e] = document.createElement(nodeStr);
}
}
el.vml[v].shape.stroked = false;
	el.vml[v].shape.appendChild(el.vml[v].fill);
	el.parentNode.insertBefore(el.vml[v].shape,el);
}
}
el.vml.image.shape.fillcolor = 'none';
	/* Don't show blank white shapeangle when waiting for image to load. */
el.vml.image.fill.type = 'tile';
	/* Makes image show up. */
el.vml.color.fill.on = false;
	/* Actually going to apply vml element's style.backgroundColor,so hide the whiteness. */
lib.attachHandlers(el);
	lib.giveLayout(el);
	lib.giveLayout(el.offsetParent);
	el.vmlInitiated = true;
	lib.applyVML(el);
	/* Render! */
}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true);
	/* TredoSoft Multiple IE doesn't like this,so try{
}
it */
}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

JS代码(lrtk.js):

/* name:yanggang;
	QQ:392017299;
	E-mail:yanggang1@conew.com;
	*/
var UA = window.navigator.userAgent,IsAndroid = (/Android|HTC/i.test(UA)),IsIPad = !IsAndroid && /iPad/i.test(UA),IsIPhone = !IsAndroid && /iPod|iPhone/i.test(UA),IsIOS = IsIPad || IsIPhone,clearAnimatea = null;
	var testStyle=document.createElement('div').style,camelCase=function(str){
	return str.replace(/^-ms-/,"ms-").replace(/-([a-z]|[0-9])/ig,function(all,letter){
	return (letter+"").toUpperCase();
}
);
}
,cssVendor=(function(){
	var ts=testStyle,cases=['-o-','-webkit-','-moz-','-ms-',''],i=0;
	do{
	if(camelCase(cases[i]+'transform') in ts){
	return cases[i];
}
}
while(++i<cases.length);
	return '';
}
)(),transitionend=(function(){
	return ({
	'-o-':'otransitionend','-webkit-':'webkitTransitionEnd','-moz-':'transitionend','-ms-':'MSTransitionEnd transitionend','':'transitionend'}
)[cssVendor];
}
)(),isCSS = function(property){
	var ts=testStyle,name=camelCase(property),_name=camelCase(cssVendor+property);
	return (name in ts) && name || (_name in ts) && _name || '';
}
;
	var liebaoBrowser ={
	domAnimation:function(ele){
	ele.detBtn.hover(function(){
	$(this).addClass('btn-hover');
}
,function(){
	$(this).removeClass('btn-hover');
}
);
	ele.navhover.hover(function(){
	$(this).find("i").addClass('nav-hover');
}
,function(){
	$(this).find("i").removeClass('nav-hover');
}
);
	ele.downBtn.hover(function(){
	$(this).addClass('down-btn');
}
,function(){
	$(this).removeClass('down-btn');
}
);
	ele.watchLb.hover(function(){
	ele.code.addClass('code-show').show();
}
,function(){
	ele.code.removeClass('code-show').hide();
}
);
	ele.fnLi.hover(function(){
	var radiusEle = $(this).find('div');
	$(this).addClass('span-img');
	if(ele.aniMation){
	radiusEle.addClass('zoom');
}
else{
	radiusEle.show();
}
}
,function(){
	var radiusEle = $(this).find('div');
	$(this).removeClass('span-img');
	if(ele.aniMation){
	radiusEle.removeClass('zoom');
}
else{
	radiusEle.hide();
}
}
);
}
,banSlide:function(item,time,ele,speed){
	clearTimeout(clearAnimatea);
	var length = ele.slide.length- 1;
	/*自动播放*/
 function autoPlay(){
	item++;
	if (item == length+1){
	item = 0;
	aniObj(item);
}
else{
	aniObj(item);
}
spanCur(item);
	clearAnimatea = setTimeout(autoPlay,time);
}
clearAnimatea = setTimeout(autoPlay,time);
	/*点击切换动画*/
 function slidePrev(e){
	e.preventDefault();
	if(!ele.slide.is(':animated')){
	if (item == 0){
	item = length;
	aniObj(item);
}
else{
	item--;
	aniObj(item);
}
spanCur(item);
}
}
;
	function slideNext(e){
	e.preventDefault();
	if(!ele.slide.is(':animated')){
	if (item == length){
	item = 0;
	aniObj(item);
}
else{
	item++;
	aniObj(item);
}
spanCur(item);
}
}
;
	/* 点击切换动画 */
 ele.slideCur.click(function(){
	clearTimeout(clearAnimatea);
	ele.slideCur.removeClass('cur');
	$(this).addClass('cur');
	item = $(this).index();
	if (item <= length){
	aniObj(item);
}
}
);
	/*执行动画方法*/
 function aniObj(getNum){
	ele.slide.hide().css({
	opacity:0.5,zIndex:0}
);
	ele.slide.eq(getNum).show().stop(true,true).animate({
	opacity:1,zIndex:8}
,speed);
	if(ele.aniMation){
	ele.slide.removeClass('banAnimate');
	ele.slide.eq(getNum).addClass('banAnimate');
}
}
/*当前动画指示*/
 function spanCur(eqNum){
	ele.slideCur.removeClass('cur');
	ele.slideCur.eq(eqNum).addClass('cur');
}
/* 触发执行事件 */
 ele.prev.click(slidePrev);
	ele.next.click(slideNext);
	/* 手机上执行touch事件 */
 if(IsIOS || IsAndroid){
	var touchMain = document.getElementById('touchMain');
	var page ={
	x:0,y:0}
var touched;
	touchMain.addEventListener('touchstart',function(e){
	clearTimeout(clearAnimatea);
	page.x = e.changedTouches[0].pageX;
	page.y = e.changedTouches[0].pageY;
}
);
	touchMain.addEventListener('touchend',function(e){
	var pageX = e.changedTouches[0].pageX-page.x;
	var pageY = e.changedTouches[0].pageY-page.y;
	if(Math.abs(pageX)>50){
	if(pageX>0){
	slidePrev(e);
}
else{
	slideNext(e);
}
}
clearAnimatea = setTimeout(autoPlay,time);
	touched=null;
}
);
	/* 防止阻止touchend事件 */
 touchMain.addEventListener('touchmove',function(e){
	if(null==touched){
	var pageX = e.changedTouches[0].pageX-page.x;
	var pageY = e.changedTouches[0].pageY-page.y;
	touched=Math.abs(pageX-page.x)<Math.abs(pageY-page.y);
}
if(!touched)e.preventDefault();
}
);
}
else{
	/*滑过主体区域停止动画*/
 ele.stopAnimte.hover(function(){
	clearTimeout(clearAnimatea);
}
,function(){
	clearAnimatea = setTimeout(autoPlay,time);
}
);
}
/*初始化动画*/
 ele.slide.eq(0).show().addClass('banAnimate');
}
,maxImgInit:function(ele){
	if(ele.windowMain.width()>760){
	ele.maxImg.hover(function(){
	if(ele.aniMation){
	$(this).addClass('aniimgstyle');
}
else{
	$(this).addClass('imgstyle');
}
}
,function(){
	if(ele.aniMation){
	$(this).removeClass('aniimgstyle');
}
else{
	$(this).removeClass('imgstyle');
}
}
);
}
else{
	return false;
}
}
,windowEvent:function(ele){
	if(!IsIOS && !IsAndroid){
	if(ele.windowMain.height() < 640){
	ele.downlaodMain.removeClass('position');
	ele.downlaodMain.addClass('padding');
}
else{
	ele.downlaodMain.removeClass('padding');
	ele.downlaodMain.addClass('position');
}
}
}
,flipObj:function(ele,time){
	if(!IsIOS && !IsAndroid){
	setTimeout(function(){
	if(ele.aniMation){
	ele.codeImg.show().addClass('flip');
	ele.phoneImg.hide();
}
else{
	ele.codeImg.show();
	ele.phoneImg.hide();
}
}
,time);
	ele.phoneImg.click(function(){
	ele.phoneImg.hide().removeClass('flip');
	ele.codeImg.show().addClass('flip');
}
);
	ele.codeImg.click(function(){
	ele.codeImg.hide().removeClass('flip');
	ele.phoneImg.show().addClass('flip');
}
);
}
else{
	$('.pc-download').css({
	position:'absolute',left:'0',zIndex:'11',top:'156px;
	'}
);
	$('.phone-download').css({
	position:'absolute',left:'0',zIndex:'12',top:'-156px'}
);
}
}
,staJS:function(){
	$(document).on('click','a',function(e){
	var statData = $(this).attr('stat');
	try{
	_hmt.push(['_trackEvent',statData,'webLB','click','download',statData]);
}
catch (e){
}
}
);
}
,init:function(ele){
	liebaoBrowser.banSlide(0,5000,ele,500);
	liebaoBrowser.domAnimation(ele);
	liebaoBrowser.windowEvent(ele);
	liebaoBrowser.maxImgInit(ele);
	ele.windowMain.on('resize',function(){
	liebaoBrowser.windowEvent(ele);
	liebaoBrowser.maxImgInit(ele);
}
);
	liebaoBrowser.flipObj(ele,2000);
	liebaoBrowser.staJS();
}
}
;
	$(function(){
	var domEle ={
	navhover:$('.nav-main a'),detBtn:$('.details'),maxImg:$('.news-img'),fnLi:$('.ft-list li'),aniMation:isCSS('animation'),watchLb:$('#watch-lb'),code:$('.watch-code'),downBtn:$('.beta-info a'),downlaodMain:$('.downlaod-main'),windowMain:$(window),bodyEle:$('body'),stopAnimte:$('.slide,.prev,.next,.item'),prev:$('.prev'),next:$('.next'),slide:$('.slide'),slideCur:$('.item a'),phoneImg:$('.phone-img'),codeImg:$('.code-img')}
;
	domEle.downlaodMain.show();
	liebaoBrowser.init(domEle);
}
);

CSS代码(lrtk.css):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,table,tbody,p,th,td,em{-webkit-text-size-adjust:none;margin:0;padding:0;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:12px;font-family:"Microsoft Yahei","΢���ź�",Tahoma,Arial,Helvetica,STHeiti;}
html,body{height:100%;}
img,input,button,a,select,textarea{margin:0;padding:0;resize:none;border:none;outline:none;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6,p,em,i,b,em{font-size:100%;word-wrap:break-word;font-weight:normal;font-style:normal;}
a:active,a:focus{outline:none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
*html{background-image:url(about:blank);background-attachment:fixed;}
/* ����IE6��bug */
/* slide */
.slide-main{height:580px;position:relative;}
.prev,.next{display:block;width:44px;height:44px;position:absolute;z-index:222;top:267px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}
.prev{left:70px;}
.next{right:70px;}
.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:540px;left:0;text-align:center;}
.item a{display:inline-block;width:24px;height:5px;margin-right:11px;background:#333;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);overflow:hidden;}
.item a.cur{background:#fff;}
.slide-box,.slide{display:block;width:100%;height:580px;overflow:hidden;}
.slide-box{position:relative;}
.slide{display:none;height:490px;padding-top:89px;background:#ff6900;position:relative;position:absolute;z-index:8;}
#bgstylea{background:#ff6900;}
#bgstyleb{background:#193d85;}
#bgstylec{background:#000;}
.slide a{display:block;width:100%;height:490px;cursor:pointer;}
.obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}
.obj-a,.obj-b{width:952px;margin-left:-476px;text-align:center;}
.obj-a{display:block;height:352px;top:100px;}
.obj-b{top:406px;height:100px;}
.obj-c{display:block;height:582px;top:0;margin-left:-540px;}
.obj-d{top:228px;height:164px;}
.obj-d p{display:block;padding-top:20px;font-size:16px;color:#fff;clear:both;}
.obj-e{width:366px;height:170px;margin-left:-460px;top:223px;z-index:12;}
.obj-f{width:692px;height:394px;top:158px;margin-left:-180px;}
.banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
@-webkit-keyframes baoAni{from{opacity:0;left:60%;}
to{opacity:1;left:50%;}
}
@-moz-keyframes baoAni{from{opacity:0;left:60%;}
to{opacity:1;left:50%;}
}
@keyframes baoAni{from{opacity:0;left:60%;}
to{opacity:1;left:50%;}
}
.banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);}
to{opacity:1;-webkit-transform:scale(1,1);}
}
@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);}
to{opacity:1;-moz-transform:scale(1,1);}
}
@keyframes saAni{from{opacity:0;transform:scale(0,0);}
to{opacity:1;transform:scale(1,1);}
}
.watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}
@-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;}
to{opacity:1;-webkit-transform:scale(1,1);transform-origin:left bottom;}
}
@-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0);transform-origin:left bottom;}
to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;}
}
@keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;}
to{opacity:1;transform:scale(1,1);transform-origin:left bottom;}
}
.banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
@-webkit-keyframes saAnic{from{opacity:0;left:47%;}
to{opacity:1;left:50%;}
}
@-moz-keyframes saAnic{from{opacity:0;left:47%;}
to{opacity:1;left:50%;}
}
@keyframes saAnic{from{opacity:0;left:47%;}
to{opacity:1;left:50%;}
}
.banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
@-webkit-keyframes saAnid{from{opacity:0;left:53%;}
to{opacity:1;left:50%;}
}
@-moz-keyframes saAnid{from{opacity:0;left:53%;}
to{opacity:1;left:50%;}
}
@keyframes saAnid{from{opacity:0;left:53%;}
to{opacity:1;left:50%;}
}
/* ����ͼ�� �Ѽ����� www.lanrentuku.com */

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