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/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!--****设置IE6下png背景透明****-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('*');
</script>
<![endif]-->
</head>
<body>
<div id="focusBar"> 
	<a href="javascript:void(0)" class="arrL" onclick="prePage()">&nbsp;</a>
	<a href="javascript:void(0)" class="arrR" onclick="nextPage()">&nbsp;</a>
	<ul class="mypng">
		<li id="focusIndex1" style="background:url(images/2.jpg) no-repeat center center; display:block;"><!--此处需判断li的display:block-->
			<div class="focusL"><a href="#"><img src="images/5.png" width="1920" height="462" /></a></div>
			<div class="zhezhao" ><a href="#"><img src="images/8.png" width="1920" height="462" /></a></div>
			<div class="focusR"><a href="#"><img src="images/9.png" width="1920" height="492" /></a></div>
		</li>
		<li id="focusIndex2" style="background:url(images/1.jpg) no-repeat center center; display:none;">
			<div class="focusL"><a href="#"><img src="images/5.png" width="1920" height="462" /></a></div>
			<div class="zhezhao" ><a href="#"><img src="images/7.png" width="1920" height="462" /></a></div>
			<div class="focusR"><a href="#"><img src="images/6.png" width="1920" height="492" /></a></div>
		</li>
		<li id="focusIndex3" style="background:url(images/2.jpg) no-repeat center center; display:none;">
			<div class="focusL"><a href="#"><img src="images/5.png" width="1920" height="462" /></a></div>
			<div class="zhezhao" ><a href="#"><img src="images/8.png" width="1920" height="462" /></a></div>
			<div class="focusR"><a href="#"><img src="images/9.png" width="1920" height="492" /></a></div>
		</li>
		<li id="focusIndex4" style="background:url(images/1.jpg) no-repeat center center; display:none;">
			<div class="focusL"><a href="#"><img src="images/5.png" width="1920" height="462" /></a></div>
			<div class="zhezhao" ><a href="#"><img src="images/7.png" width="1920" height="462" /></a></div>
			<div class="focusR"><a href="#"><img src="images/6.png" width="1920" height="492" /></a></div>
		</li>
	</ul>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

$(function(){
	$("#focusIndex1").show();
	$("#focusBar li").css("width",$(window).width());
	$("a.arrL").mouseover(function(){
	stopFocusAm();
}
).mouseout(function(){
	starFocustAm();
}
);
	$("a.arrR").mouseover(function(){
	stopFocusAm();
}
).mouseout(function(){
	starFocustAm();
}
);
	$("#focusBar li").mouseover(function(){
	stopFocusAm();
}
).mouseout(function(){
	starFocustAm();
}
);
	starFocustAm();
}
);
	/*------focus-------*/
$("#focusBar").hover(function (){
	$("#focusBar .arrL").stop(false,true);
	$("#focusBar .arrR").stop(false,true);
	$("#focusBar .arrL").animate({
	left:0}
,{
	duration:500}
);
	$("#focusBar .arrR").animate({
	right:0}
,{
	duration:500}
);
}
,function (){
	$("#focusBar .arrL").stop(false,true);
	$("#focusBar .arrR").stop(false,true);
	$("#focusBar .arrL").animate({
	left:-52}
,{
	duration:500}
);
	$("#focusBar .arrR").animate({
	right:-52}
,{
	duration:500}
);
}
);
	var timerFID;
	function nextPage(){
	changeFocus(true);
}
function prePage(){
	changeFocus(false);
}
var currentFocusI=1;
	var changeingFocus = false;
	function changeFocus(dir){
	if($("#focusBar li").length <= 1) return;
	if(changeingFocus) return;
	changeingFocus = true;
	$("#focusIndex"+nextI).stop(false,true);
	$("#focusIndex"+nextI+" .focusL").stop(false,true);
	$("#focusIndex"+nextI+" .focusR").stop(false,true);
	$("#focusIndex"+nextI+" .zhezhao").stop(false,true);
	var nextI = dir?currentFocusI+1:currentFocusI-1;
	nextI = nextI>$("#focusBar li").length?1:(nextI<1?$("#focusBar li").length:nextI);
	//var focusWidth = $(window).width()>1000?1000:$(window).width();
	$("#focusIndex"+currentFocusI).css("width",$(window).width());
	$("#focusIndex"+nextI).css("width",$(window).width());
	if(dir){
	$("#focusIndex"+nextI).css("left",$(window).width());
	$("#focusIndex"+nextI+" .focusL").css("left",$(window).width()/2);
	$("#focusIndex"+nextI+" .focusR").css("left",$(window).width()/2);
	$("#focusIndex"+nextI+" .zhezhao").css("left",$(window).width()/2);
	$("#focusIndex"+currentFocusI).show();
	$("#focusIndex"+nextI).show();
	$("#focusIndex"+currentFocusI+" .focusL").animate({
	left:-($(window).width()/2+1000)}
,1200,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .zhezhao").animate({
	left:-($(window).width()/2+1000)}
,1400,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .focusR").animate({
	left:-($(window).width()/2+1000)}
,900,'easeInExpo',function(){
	$("#focusIndex"+nextI+" .focusL").animate({
	left:-960}
,1200,'easeInOutCirc');
	$("#focusIndex"+nextI+" .focusR").animate({
	left:-960}
,900,'easeInOutCirc');
	$("#focusIndex"+nextI+" .zhezhao").animate({
	left:-960}
,1400,'easeInOutCirc');
	$("#focusIndex"+currentFocusI).animate({
	left:-$(window).width()}
,1800,'easeOutExpo');
	$("#focusIndex"+nextI).animate({
	left:0}
,1800,'easeOutExpo',function(){
	$("#focusIndex"+currentFocusI).hide();
	currentFocusI = nextI;
	changeingFocus = false;
}
);
}
);
}
else{
	$("#focusIndex"+nextI).css("left",-$(window).width());
	$("#focusIndex"+nextI+" .focusL").css("left",-($(window).width()/2+1200));
	$("#focusIndex"+nextI+" .focusR").css("left",-($(window).width()/2+900));
	$("#focusIndex"+nextI+" .zhezhao").css("left",-($(window).width()/2+1400));
	$("#focusIndex"+currentFocusI).show();
	$("#focusIndex"+nextI).show();
	$("#focusIndex"+currentFocusI+" .focusR").animate({
	left:$(window).width()/2}
,900,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .zhezhao").animate({
	left:$(window).width()/2}
,1400,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .focusL").animate({
	left:$(window).width()/2}
,1200,'easeInExpo',function(){
	$("#focusIndex"+nextI+" .focusL").animate({
	left:-960}
,1200,'easeInOutCirc');
	$("#focusIndex"+nextI+" .focusR").animate({
	left:-960}
,900,'easeInOutCirc');
	$("#focusIndex"+nextI+" .zhezhao").animate({
	left:-960}
,1400,'easeInOutCirc');
	$("#focusIndex"+currentFocusI).animate({
	left:$(window).width()}
,1800,'easeOutExpo');
	$("#focusIndex"+nextI).animate({
	left:0}
,1800,'easeOutExpo',function(){
	$("#focusIndex"+currentFocusI).hide();
	currentFocusI = nextI;
	changeingFocus = false;
}
);
}
);
}
}
function starFocustAm(){
	timerFID = setInterval("timer_tickF()",5000);
}
function stopFocusAm(){
	clearInterval(timerFID);
}
function timer_tickF(){
	changeFocus(true);
}

CSS代码(style.css):

@charset "utf-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;font-family:"宋体";color:#000;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal;}
strong{font-style:normal;}
ol,ul,li{list-style:none outside none;}
caption{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
a{text-decoration:none;color:#666;font-family:"微软雅黑";font-size:12px;}
input{outline:none;*outline:expression(this.hideFocus=true);}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner{border:none;padding:0;}
.clear:after{visibility:hidden;display:block;font-size:0;content:"1";clear:both;height:0;}
.fLe{float:left;_display:inline;}
.fRi{float:right;_display:inline;}
.clear{clear:both;}
/* focusBar */
#focusBar{width:100%;height:492px;clear:both;position:relative;overflow:hidden;padding-top:10px;}
#focusBar .mypng{background:url(../images/9.gif) repeat-x top center;padding-top:2px;}
#focusBar li{width:100%;clear:both;height:462px;display:none;position:absolute;/* position:relative;*/
}
#focusBar .focusL{height:462px;position:absolute;z-index:9;/*left:-1000px;*/
 top:0px;left:-960px;margin-left:50%;}
#focusBar .focusR{height:462px;position:absolute;z-index:10;/* right:1000px;*/
top:0px;left:-960px;margin-left:50%;}
#focusBar .arrL,#focusBar .arrR{display:block;width:52px;height:134px;position:absolute;top:150px;z-index:11111;cursor:pointer;background:url(../images/bt_arr.png) no-repeat;}
#focusBar .arrL{left:-52px;background-position:0px 0px;}
#focusBar .arrR{right:-52px;background-position:-68px 0px;}
#focusBar .arrL:hover{background-position:0px -144px;}
#focusBar .arrR:hover{background-position:-68px -144px;}
.zhezhao{height:492px;position:absolute;z-index:19;/* right:1000px;*/
top:-15px;left:-960px;margin-left:50%;}

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