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/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</head>
<body>
<style type="text/css">
/* ie6 png */
.mypng img {
azimuth: expression( this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("', '').replace('")', ''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")), this.pngSet=true);
}
</style>
<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/483a26db99919a40eee1f0dd652ad53b.gif) repeat-x;">
			<div class="focusL"><a href="htpp://13141618.taobao.com/"><img src="images/0240ddc5fa163156719b498c45d4ded2.png" width="1000" height="644" /></a></div>
			<div class="focusR"><a href="htpp://13141618.taobao.com/"><img src="images/2a18e9128aad06d0b6b8d908ecf7c2a1.png" width="1000" height="644" /></a></div>
		</li>
		<li id="focusIndex2">
			<div class="focusL"><a href="htpp://13141618.taobao.com/"><img src="images/2d20716b5ecc36c5c9e35a7dfc1834a4.png" width="1000" height="644" /></a></div>
			<div class="focusR"><a href="htpp://13141618.taobao.com/"><img src="images/2a18e9128aad06d0b6b8d908ecf7c2a1.png" width="1000" height="644" /></a></div>
		</li>
		<li id="focusIndex3" style="background:url(images/8bc531a341bac9421a25093ccf376e7d.gif) repeat-x;">
			<div class="focusL"><a href="htpp://13141618.taobao.com/"><img src="images/b249cfb8cebc4696d7a317181b823eb3.png" width="1000" height="644" /></a></div>
			<div class="focusR"><a href="htpp://13141618.taobao.com/"><img src="images/dc0e4583d9af6915d306cabb9ac6df64.png" width="1000" height="644" /></a></div>
		</li>
		<li id="focusIndex4" style="background:url(images/8bc531a341bac9421a25093ccf376e7d.gif) repeat-x;">
			<div class="focusL"><a href="htpp://13141618.taobao.com/"><img src="images/b249cfb8cebc4696d7a317181b823eb3.png" width="1000" height="644" /></a></div>
			<div class="focusR"><a href="htpp://13141618.taobao.com/"><img src="images/dc0e4583d9af6915d306cabb9ac6df64.png" width="1000" height="644" /></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);
	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"+currentFocusI).show();
	$("#focusIndex"+nextI).show();
	$("#focusIndex"+currentFocusI+" .focusL").animate({
	left:-($(window).width()/2+1000)}
,300,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .focusR").animate({
	left:-($(window).width()/2+1000)}
,500,'easeInExpo',function(){
	$("#focusIndex"+nextI+" .focusL").animate({
	left:-500}
,1000,'easeInOutCirc');
	$("#focusIndex"+nextI+" .focusR").animate({
	left:-500}
,1200,'easeInOutCirc');
	$("#focusIndex"+currentFocusI).animate({
	left:-$(window).width()}
,1000,'easeOutExpo');
	$("#focusIndex"+nextI).animate({
	left:0}
,1000,'easeOutExpo',function(){
	$("#focusIndex"+currentFocusI).hide();
	currentFocusI = nextI;
	changeingFocus = false;
}
);
}
);
}
else{
	$("#focusIndex"+nextI).css("left",-$(window).width());
	$("#focusIndex"+nextI+" .focusL").css("left",-($(window).width()/2+1000));
	$("#focusIndex"+nextI+" .focusR").css("left",-($(window).width()/2+1000));
	$("#focusIndex"+currentFocusI).show();
	$("#focusIndex"+nextI).show();
	$("#focusIndex"+currentFocusI+" .focusR").animate({
	left:$(window).width()/2}
,300,'easeInExpo');
	$("#focusIndex"+currentFocusI+" .focusL").animate({
	left:$(window).width()/2}
,500,'easeInExpo',function(){
	$("#focusIndex"+nextI+" .focusL").animate({
	left:-500}
,1200,'easeInOutCirc');
	$("#focusIndex"+nextI+" .focusR").animate({
	left:-500}
,1000,'easeInOutCirc');
	$("#focusIndex"+currentFocusI).animate({
	left:$(window).width()}
,1000,'easeOutExpo');
	$("#focusIndex"+nextI).animate({
	left:0}
,1000,'easeOutExpo',function(){
	$("#focusIndex"+currentFocusI).hide();
	currentFocusI = nextI;
	changeingFocus = false;
}
);
}
);
}
}
function starFocustAm(){
	timerFID = setInterval("timer_tickF()",12000);
}
function stopFocusAm(){
	clearInterval(timerFID);
}
function timer_tickF(){
	changeFocus(true);
}

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% "Arial","微软雅黑";color:#666666;background-color:#ffffff;}
a,a:hover{color:#666666;text-decoration:none;border:0px;}
/* focusBar */
#focusBar{width:100%;height:644px;clear:both;position:relative;background:#242424;overflow:hidden;}
#focusBar li{width:100%;clear:both;height:644px;display:none;position:absolute;/* position:relative;*/
}
#focusBar .focusL{height:644px;position:absolute;z-index:9;/*left:-1000px;*/
 top:0px;left:-500px;margin-left:50%;}
#focusBar .focusR{height:644px;position:absolute;z-index:19;/* right:1000px;*/
top:0px;left:-500px;margin-left:50%;}
a.arrL,a.arrR{display:block;width:52px;height:134px;position:absolute;top:250px;z-index:99;cursor:pointer;background:url(../images/bt_arr.png) no-repeat;}
a.arrL{left:-52px;background-position:0px 0px;}
a.arrR{right:-52px;background-position:-68px 0px;}
a.arrL:hover{background-position:0px -144px;}
a.arrR:hover{background-position:-68px -144px;}

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