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 href="css/home.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/jquery.js"></script> 
<script language="javascript" src="js/jquery.easing.1.3.js"></script>
<script language="javascript" src="js/i.js"></script> 
<style>
.prove_index,.next_index{background:url(images/btn00.png);top:50%;height:47px;width:44px;position:absolute;margin-top:-23px;z-index:999;cursor:pointer}
.prove_index{left:20px;background-position:44px 0; display:none;}
.next_index{right:20px;background-position:0px 47px; display:none;}
.prove_index:hover{background:url(images/btn00.png);background-position:0px 0px;}
.next_index:hover{background:url(images/btn00.png);background-position:44px 47px;}
#kfbtn{background:url(images/top_64.png);background-position:0 0;height:31px;}
#dzbtn{background:url(images/top_34.png);background-position:0 0;height:31px;}
#ylbtn{background:url(images/top_54.png);background-position:0 0;height:31px;}
#jgbtn{background:url(images/top_14.png);background-position:0 0;height:31px;}
#mzbtn{background:url(images/top_24.png);background-position:0 0;height:31px;}
#qjbtn{background:url(images/top_44.png);background-position:0 0;height:31px;}
#kfbtn:hover,#dzbtn:hover,#ylbtn:hover,#jgbtn:hover,#mzbtn:hover,#qjbtn:hover{background-position:0 31px;}
</style>
</head>
<body>
<div class="content_show"> 
<div class="banner">
<div class="banner_container" id="index_banner">
  <div class="banner_content">
        <div style="background-image:url(images/top_07.jpg); position: absolute;left: 50%;margin-left: -720px;">
        <a href="#" style="width:1440px; height:525px;display:block">
            <a id="wel_one" class="banner_link_one" style="position:absolute;left:156px;top:155px;display:block;"><img src="images/top_71.png"  class="png" /></a>
            <a id="wel_two" class="banner_link_two" style="position:absolute;left:156px;top:220px;display:block;"><img src="images/top_72.png"  class="png" /></a>
            <a id="wel_three" class="banner_link_three" style="position:absolute;left:156px;top:302px;display:block;"> <img src="images/top_73.png"  class="png" /></a>
            <a id="wel_four" class="banner_link_three" style="position:absolute;left:156px;top:325px;display:block;"> <img src="images/top_74.png"  class="png" /></a>
        </a>
        </div>
  </div>
  
  <div class="banner_content">
    <div style="background-image:url(images/top_06.jpg); position: absolute;left: 50%;margin-left: -720px;">
    <a href="#" style="width:1440px; height:525px;display:block">
        <a href="#" id="kf_one" class="banner_link_one" style="position:absolute;left:357px;top:137px;display:block;"> <img src="images/top_61.png"  class="png" /></a>
        <a href="#" id="kf_two" class="banner_link_two" style="position:absolute;left:357px;top:192px;display:block;"> <img src="images/top_62.png"  class="png" /></a>
        <a href="#" id="kf_three" class="banner_link_three" style="position:absolute;left:357px;top:240px;display:block;"> <img src="images/top_63.png"  class="png" /></a>
        <a href="#" id="kfbtn" class="banner_link_four png" style="position:absolute;left:357px;top:370px;display:block;width:559px"></a>
    </a>
    </div>
  </div>
  
  <div class="banner_content">
    <div style="background-image:url(images/top_03.jpg); position: absolute;left: 50%;margin-left: -720px;">
    <a href="#" style="width:1440px; height:525px;display:block">
        <a id="dz_one" href="#" class="banner_link_one" style="position:absolute;left:490px;top:133px;display:block;"><img src="images/top_31.png" class="png" /></a>
        <a id="dz_two" href="#" class="banner_link_two" style="position:absolute;left:490px;top:227px;display:block;"><img src="images/top_32.png" class="png" /></a>
        <a id="dz_three" href="#" class="banner_link_three" style="position:absolute;left:461px;top:266px;display:block;"><img src="images/top_33.png" class="png" /></a>
        <a id="dzbtn" href="#" class="banner_link_four png" style="position:absolute;left:461px;top:417px;display:block;width:267px"></a>
    </a>
    </div>
  </div>
  
  <div class="banner_content">
    <div style="background-image:url(images/top_05.jpg); position:absolute;left:50%;margin-left:-720px;">
    <a href="#" style="width:1440px; height:525px;display:block">
        <a id="yl_one" href="#" class="banner_link_one" style="position:absolute;left:590px;top:122px;display:block;"> <img src="images/top_51.png"  class="png" /></a>
        <a id="yl_two" href="#" class="banner_link_two" style="position:absolute;left:590px;top:211px;display:block;"> <img src="images/top_52.png"  class="png" /></a>
        <a id="yl_three" href="#" class="banner_link_three" style="position:absolute;left:590px;top:252px;display:block;"> <img src="images/top_53.png"  class="png" /></a>
        <a id="ylbtn" href="#" class="banner_link_four png" style="position:absolute;left:590px;top:371px;display:block;width:294px"></a>
    </a>
    </div>
  </div>
  
  <div class="banner_content">
    <div style="background-image:url(images/top_01.jpg);position:absolute;left:50%;margin-left: -720px;">
    <a href="#" style="width:1440px; height:525px;display:block">
        <a id="jg_one" class="banner_link_one" href="#" style="position:absolute;left:497px;top:165px;display:block;"><img src="images/top_11.png" class="png"/></a>
        <a id="jg_two" href="#" class="banner_link_two" style="position:absolute;left:497px;top:254px;display:block;"><img src="images/top_12.png" class="png"/></a>
        <a id="jg_three" href="#" class="banner_link_three" style="position:absolute;left:497px;top:296px;display:block;"><img src="images/top_13.png" class="png"/></a>
        <a href="#" id="jgbtn" class="banner_link_four png" style="position:absolute;left:497px;top:404px;display:block;width:480px"></a>
    </a>
    </div>
  </div>      
  <ul class="banner_nav">
    <li class="current"><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
  <a class="prove_index" style="display: inline;"></a>
  <a class="next_index" style="display: inline;"></a>
  </div>
</div>
</div>
<script language="javascript">
$().ready(function(e) {	
	$("#wel_one").animate({left:"453px"},1400,"swing");
	$("#wel_two").animate({left:"453px"},1200,"swing");
	$("#wel_three").animate({left:"453px"},1000,"swing");
	$("#wel_four").animate({left:"453px"},800,"swing");	
	var url = window.location.href //获取当前URL
	if(url.indexOf("?") > 0 ) {var cutUrl = url.split("?");//用“?”将URL分割成2部分 
				var par =  cutUrl[1];
				var idParCut = par.split("=");
				var tid = idParCut[1];
				var pageid =tid-1;
				if(pageid == 1){
					$("#kf_one").animate({left:"657px"},1400,"swing");
					$("#kf_two").animate({left:"657px"},1200,"swing");
					$("#kf_three").animate({left:"657px"},1000,"swing");
					$("#kfbtn").animate({left:"657px"},800,"swing");
				}
				if(pageid == 2){
					$("#dz_one").animate({left:"210px"},1400,"swing");
					$("#dz_two").animate({left:"210px"},1200,"swing");
					$("#dz_three").animate({left:"210px"},1000,"swing");
					$("#dzbtn").animate({left:"210px"},800,"swing");
				}
				if(pageid == 3){
					$("#yl_one").animate({left:"890px"},1400,"swing");
					$("#yl_two").animate({left:"890px"},1200,"swing");
					$("#yl_three").animate({left:"890px"},1000,"swing");
					$("#ylbtn").animate({left:"890px"},800,"swing");
				}
				if(pageid == 4){
					$("#jg_one").animate({left:"220px"},1400,"swing");
					$("#jg_two").animate({left:"220px"},1200,"swing");
					$("#jg_three").animate({left:"220px"},1000,"swing");
					$("#jgbtn").animate({left:"220px"},800,"swing");
				}
	}
	
		$f.create($f.slide,{parent:'.banner_container',target:'.banner_content',nav:'.banner_nav li',start:pageid,easing:'easeInOutExpo',duration:1000,time:20000,auto:true,dir:0,current:'current'});
		var pos = {
			0:453,1:657,2:210,3:890,4:220

		},offset = 600,time_one=1400,time_two=1200,time_three=1000,time_four=800;

		$('.banner_content').each(function(index, element) {

			$(this).bind('slideInPos',function(){
				$(this).find('.banner_link_one').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_one,'swing');
				$(this).find('.banner_link_two').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_two,'swing');
				$(this).find('.banner_link_three').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_three,'swing');
				$(this).find('.banner_link_four').stop().css({left:pos[index]-offset}).animate({left:pos[index]},time_four,'swing');

			}).bind('slideInNeg',function(){

				$(this).find('.banner_link_one').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_one,'swing');
				$(this).find('.banner_link_two').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_two,'swing');
				$(this).find('.banner_link_three').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_three,'swing');
				$(this).find('.banner_link_four').stop().css({left:pos[index]+offset}).animate({left:pos[index]},time_four,'swing');

			}).bind('slideOutPos',function(){

				$(this).find('.banner_link_one').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_one,'swing');
				$(this).find('.banner_link_two').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_two,'swing');
				$(this).find('.banner_link_three').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_three,'swing');
				$(this).find('.banner_link_four').stop().css({left:pos[index]}).animate({left:pos[index]+offset},time_four,'swing');

			}).bind('slideOutNeg',function(){

				$(this).find('.banner_link_one').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_one,'swing');
				$(this).find('.banner_link_two').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_two,'swing');
				$(this).find('.banner_link_three').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_three,'swing');
				$(this).find('.banner_link_four').stop().css({left:pos[index]}).animate({left:pos[index]-offset},time_four,'swing');

			});

		});	
		
	});
function mouseIn(id){
	$(id).children().stop(true,true).animate({opacity:"1"},400,"easeInOutBounce")
	}
function mouseOut(id){
	$(id).children().stop(true,true).animate({opacity:"0"},400,"easeInOutBounce")
	}

	$(".prove_index").click(function(){
		$(".banner_nav li").eq($(".banner_nav li.current").index()-1).children("a").click();
		});
	$(".next_index   ").click(function(){
		$(".banner_nav li").eq($(".banner_nav li.current").index()+1).children("a").click();
		});
		$(".next_index").click(function(){
		if($(".banner_nav li.current").index()==6){
			$(".banner_nav li").eq(0).children("a").click();
			};
		});
		
		$(".banner_container").mouseover(function(){
			 $(".prove_index,.next_index").show()
			 });
		$(".banner_container").mouseout(function(){
			 $(".prove_index,.next_index").hide()
			 });
				 
	$(document).ready(function(e) {
    var url = window.location.href //获取当前URL
	if(url.indexOf("?") > 0 ) {
		var cutUrl = url.split("?");//用“?”将URL分割成2部分 
		var par =  cutUrl[1];
		var idParCut = par.split("=");
		var tid = idParCut[1];
		if(tid==2){$(".banner_nav li").eq(1).children("a").click()}
		if(tid==3){$(".banner_nav li").eq(2).children("a").click()}
		if(tid==4){$(".banner_nav li").eq(3).children("a").click()}
		if(tid==5){$(".banner_nav li").eq(4).children("a").click()}
		if(tid==6){$(".banner_nav li").eq(5).children("a").click()}
		if(tid==7){$(".banner_nav li").eq(6).children("a").click()}
		else{return false}
	}
	else{
	    return false;
	}
});	
</script>
</body>
</html>

JS代码(i.js):

(function($){
	$f = window.$f ||{
	is:function(A,_){
	var $ = Object.prototype.toString.call(_).slice(8,-1).toLowerCase();
	return _ !== undefined && _ !== null && $ === A.toLowerCase()}
,sizeOf:function(A){
	if(this.is('array',A)||this.is('string',A)){
	return A.length;
}
else if(this.is('object',A)){
	var _ = 0;
	for(var i in A){
	_++;
}
return _;
}
else{
	return 0;
}
}
,create:function(c,p){
	var _ = this;
	if(_.is("function",c))return new c(p);
}
,extend:function(a,b){
	return $.extend(a,b);
}
}
;
	//1.slide$f.slide = function(_){
	var options ={
	parent:'body',target:'',nav:'.nav',current:'current',start:0,auto:false,dir:1,time:3000,duration:1000,easing:'swing'}
;
	this.options ={
}
;
	this.init(options,_);
	//this.render();
}
;
	$f.slide.prototype ={
	init:function(_a,_b){
	var _ = this,__ = _.options = $f.extend(_a,_b);
	!!__.target&&(_.par = $(__.parent),_.tar = $(__.target,__.parent),_.nav = $(__.nav,__.parent))&&_.render();
}
,render:function(){
	var _ = this,__ = _.options;
	_.tar.hide().eq(__.start).show().addClass(__.current);
	_.nav.bind('click',function(e,f){
	var _self = this;
	if(!_.CLICK&&!$(_self).hasClass(__.current)){
	var _f = _.nav.index(_.nav.filter('.'+__.current)),_t = _.nav.index(_self);
	_.slideHandler(_f,_t,f);
}
}
).removeClass(__.current).eq(__.start).addClass(__.current);
	__.auto&&_.timerHandler();
}
,slideHandler:function(f,t,flag,c){
	var _ = this,__ = _.options;
	_.CLICK = true;
	_.nav.eq(f).removeClass(__.current);
	_.nav.eq(t).addClass(__.current);
	_.tar.eq(t).stop(true,false).addClass(__.current).css({
	"display":"block","left":!!flag?(f>t?"100%":"-100%"):(f>t?"-100%":"100%"),"z-index":1}
).animate({
	left:"0%"}
,__.duration,__.easing,c);
	_.tar.eq(t).trigger("slideIn");
	_.tar.eq(f).trigger("slideOut");
	if(f<t&&!flag){
	_.tar.eq(t).trigger("slideInPos");
	_.tar.eq(f).trigger("slideOutPos")}
else{
	_.tar.eq(t).trigger("slideInNeg");
	_.tar.eq(f).trigger("slideOutNeg")}
_.tar.eq(f).stop(true,false).removeClass(__.current).css({
	"display":"block","z-index":0}
).animate({
	left:!!flag?(f>t?"-100%":"100%"):(f>t?"100%":"-100%")}
,__.duration,__.easing,function(){
	$(this).hide().trigger("slideOutEnd");
	_.tar.eq(t).trigger("slideInEnd");
	_.CLICK = false;
}
);
	_.tar.eq(f).removeClass(__.current);
	_.tar.eq(t).addClass(__.current);
}
,slideLeftRightHanler:function(dir){
	var _ = this,__ = _.options;
	var _s = $(_.nav).size(),_i = dir==0?-1:1,_f = $(_.nav).index($(_.nav).filter('.'+__.current)),_t = _f+_i<0?_s-1:_f+_i>=_s?0:_f+_i;
	$(_.nav).eq(_t).trigger("click",(_f+_i<0||_f+_i>=_s)?true:false);
}
,timerHandler:function(){
	var _ = this,__ = _.options,_timerStop=function(){
	_.timmer & clearTimeout(_.timmer);
}
,_timerStart=function(_t){
	_timerStop();
	_.timmer = setTimeout(_timer,_t);
}
,_timer=function(){
	_.slideLeftRightHanler(__.dir);
	_timerStart(__.time+__.duration);
}
;
	_.par.bind("mouseenter",function(){
	_timerStop();
}
).bind("mouseleave",function(){
	_timerStart(__.time);
}
).trigger("mouseleave");
}
}
;
	//2.mask$f.mask = function(tar,_){
	if(!$(tar)[0])return;
	var isIE6 = navigator.userAgent.toLowerCase().indexOf("msie 6")>-1;
	var self=this,options ={
	closeElement:'',position:'static',align:'center',valign:'middle',zIndex:1000,maskClose:true}
,$mask = $('<div class="f_mask"></div>'),_pos=['fixed','absolute','static'];
	options = $.extend(options,_);
	$mask.attr("id","f_mask_"+(!$f.mask.id?$f.mask.id=0:$f.mask.id++));
	$mask.css({
	width:document.body.scrollWidth,height:document.body.scrollHeight,position:'absolute',backgroundColor:'#000',opacity:0.5,left:0,top:0,zIndex:options.zIndex}
).appendTo('body');
	!$f.mask.list&&($f.mask.list=[],$(window).bind("resize",function(){
	$('.f_mask').css({
	width:$('body').width(),height:document.body.scrollHeight}
);
}
));
	$f.mask.list.push(tar);
	switch(options.position){
	case 'fixed':$(tar).css({
	position:!!isIE6?'absolute':'fixed',left:'50%',top:!!isIE6?$(window).height()/2+$(window).scrollTop():'50%',marginLeft:-$(tar).width()/2,marginTop:-$(tar).height()/2,'z-index':$f.mask.id+options.zIndex+1}
).show();
	break;
	case 'absolute':$(tar).css({
	position:'absolute',left:'50%',top:$(window).height()/2+$(window).scrollTop(),marginLeft:-$(tar).width()/2,marginTop:-$(tar).height()/2,'z-index':$f.mask.id+options.zIndex+1}
).show();
	break;
	default:$(tar).css({
	'z-index':$f.mask.id+options.zIndex+1}
).show();
	break;
}
!!options.closeElement&&$(tar).find(options.closeElement).bind("click",function(){
	self.unmask(tar);
}
);
}
$f.unmask = function(tar){
	$(tar).hide();
	$('div').remove('.f_mask');
}
$f.select = function(tar,_){
	var options ={
	wrapper:'.f_select',formInput:'',showInput:'.f_select_value',optionContainer:'ul',option:'li',optionVlaue:'',optionHoverClass:'hover',toggleClass:'open',toggle:true,index:-1,onChange:null,context:null}
options = $.extend(options,_);
	$(tar).each(function(index,element){
	var self = this,_sel;
	$(self).bind('open',function(){
	$(self).addClass('open');
	$(options.optionContainer,self).show();
	!!_sel&&$(_sel).addClass(options.optionHoverClass);
}
).bind('close',function(){
	$(self).removeClass('open');
	$(options.optionContainer,self).hide();
}
);
	if(!!options.toggle){
	$(self).hover(function(e){
	$(self).trigger('open');
}
,function(e){
	$(self).trigger('close')}
);
}
options.opt = options.optionContainer+' '+options.option;
	$(options.optionContainer,self).delegate(options.option,"mouseenter",function(){
	$(options.opt,self).removeClass(options.optionHoverClass);
	$(this).addClass(options.optionHoverClass);
}
).delegate(options.option,"mouseleave",function(){
	$(this).removeClass(options.optionHoverClass);
}
).delegate(options.option,'click',function(){
	$(options.showInput,self).text($(this).text());
	!!options.formInput&&(_temp = $(options.formInput,self).val(),$(options.formInput,self).val(!!options.optionVlaue?$(this).attr(options.optionVlaue):$(this).text()),_temp!=$(options.formInput,self).val()&&!!options.onChange&&(!!options.context?options.onChange.call(options.context):options.onChange.call(self)));
	_sel = this;
	$(self).trigger('close');
}
);
	if(options.index>-1){
	$(options.opt,self).eq(options.index).trigger('click');
}
}
);
}
}
).call(window,jQuery)

CSS代码(home.css):

@charset "utf-8";/* CSS Document */
html,body,ul,li,a,p{margin:0;padding:0;}
body{background:url(images/maxbg.jpg) repeat;background-attachment:fixed;}
p{font-size:14px;color:#aaaaaa;line-height:33px;}
img{border:0;}
ul,li{list-style:none;}
a{text-decoration:none;}
.content_show{background:#fff;width:100%;max-width:1440px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1440?"1440px":"100%");margin:0 auto;}
/*清除浮动*/
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{*zoom:1;}
/*main css*/
.show{display:block;}
.none{display:none;}
.banner{width:100%;min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"100%");overflow:hidden;position:relative;height:525px;z-index:998}
.banner_container{height:525px;width:100%;min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"100%");max-width:1440px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1440?"1440px":"100%");display:block;overflow:hidden;left:50%;margin-left:-720px;z-index:997}
.banner_container .banner_content{position:absolute;left:0%;top:0%;width:100%;min-width:1000px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"100%");max-width:1440px;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1440?"1440px":"100%");height:100%;overflow:hidden;z-index:996}
.banner_container .banner_content img{z-index:995}
.banner_nav{position:absolute;z-index:10;bottom:10px;left:50%;margin-left:-64px;z-index:999}
.banner_nav li{float:left;width:22px;height:20px;}
.banner_nav li a{float:left;width:22px;height:20px;text-align:center;line-height:20px;font-size:0px;cursor:pointer;background-image:url(../images/point_2.png);background-repeat:no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='images/point_2.png')}
.banner_nav li.current a{background-image:url(../images/point_1.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='images/point_1.png');}

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