jquery视差滑块幻灯特效

效果如图，

index.html

style.css

*{
	margin:0;
	padding:0;
}
body{
	font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
	font-size:14px;
	background:#222;
	color:#333;
	overflow-x:hidden;
}
h1{
	font-size:56px;
	color:#ccc;
}
h2{
	font-size:20px;
	padding:10px 0px 10px 0px;
	margin:15px 0px 20px 0px;
	color:#999;
	text-shadow:0 0 3px 5px #000000;
}
a{
	color:#555;
	text-decoration:none;
}
a:hover{
	color:#222;
}
p{
	padding:5px 0px;
}
.wrapper{
	width:960px;
	margin:10px auto;
}
.clear{
	clear:both;
}
.footer{
	text-align:center;
	width:100%;
	padding:20px 0px;
	clear:both;
	margin-top:30px;
	color:#666;
}
.footer a{
	margin:0px 20px;
}
.footer a:hover{
	color:#666;
}
/* Slider Style */
.pxs_container{
	width:100%;
	height:420px;
	position:relative;
	border-top:7px solid #333;
	border-bottom:7px solid #333;
	overflow:hidden;
	-moz-box-shadow:0px 0px 7px #000;
	-webkit-box-shadow:0px 0px 7px #000;
	box-shadow:0px 0px 7px #000;
}
.pxs_bg{
	background:url('bg.png') top left;
}
.pxs_bg div{
	position:absolute;
	top:0px;
	left:0px;
	width:7584px;
	height:420px;
	background-repeat:repeat;
	background-position:top left;
	background-color:transparent;
}
.pxs_bg .pxs_bg1{
	/*background-image:url(bg1.png);*/
	/*left negative 1/8 of*/
	background:url('2.png') repeat-x left top;
}
.pxs_bg .pxs_bg2{
	background:url('1.png') repeat-x -200px 20px;
	/*left negative 1/4 of*/
}
.pxs_bg .pxs_bg3{
	/*background-image:url(bg3.png);*/
	/*left negative 1/2 of*/
	background:url('3.png') repeat-x left 140px;
}
.pxs_slider_wrapper{
	display:none;
}
.pxs_container ul{
	margin:0px;
	padding:0px;
	list-style:none;
}
ul.pxs_slider{
	position:absolute;
	left:0px;
	top:0px;
	height:420px;
}
ul.pxs_slider li{
	height:420px;
	float:left;
	position:relative;
}
ul.pxs_slider li img{
	display:block;
	margin:35px auto 0px auto;
	-moz-box-shadow:0px 0px 7px #222;
	-webkit-box-shadow:0px 0px 7px #222;
	box-shadow:0px 0px 7px #222;
	border: 8px solid transparent;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}
ul.pxs_thumbnails{
	height:35px;
	position:absolute;
	top:320px;
	left:50%;
}
ul.pxs_thumbnails li{
	position:absolute;
	display:block;
}
ul.pxs_thumbnails li img{
	border: 5px solid #FFFFFF;
	-moz-box-shadow:1px 1px 7px #555;
	-webkit-box-shadow:1px 1px 7px #555;
	box-shadow:1px 1px 7px #555;
	cursor:pointer;
	display:block;
	opacity:0.7;
}
ul.pxs_thumbnails li.selected img{
	opacity:1.0;
}
.pxs_navigation span{
	position:absolute;
	width:30px;
	height:60px;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
	top:145px;
	opacity:0.6;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	cursor:pointer;
}
.pxs_navigation span:hover{
	opacity:0.9;
}
.pxs_navigation span.pxs_prev{
	background:#000 url('prev.png') no-repeat center;
}
.pxs_navigation span.pxs_next{
	background:#000 url('next.png') no-repeat center;
}
.pxs_loading{
	color:#fff;
	font-size:20px;
	background:#333 url('ajax-loader.gif') no-repeat 10px 50%;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	opacity:0.7;
	width:180px;
	position:absolute;
	top:150px;
	left:50%;
	margin-left:-90px; padding-left:50px; padding-right:15px; padding-top:15px; padding-bottom:15px
}

index.js

window.onload = function()
{
	var oImgBox = getByClass(document.body,'pxs_slider_wrapper')[0];
	var oImg = getByClass(document.body,'pxs_slider')[0];
	var aLi = oImg.getElementsByTagName('li');
	var aImg = oImg.getElementsByTagName('img');
	

	
	var oPrev = getByClass(document.body,'pxs_next')[0];
	var oNext = getByClass(document.body,'pxs_prev')[0];
	
	var oImg_sm = getByClass(document.body,'pxs_thumbnails')[0];
	var aImg_li = oImg_sm.getElementsByTagName('li');
	var aImg_sm = oImg_sm.getElementsByTagName('img');
	
	var iNow = 0;
	
	oImg.style.width = aLi.length * document.documentElement.clientWidth + 'px';
	
	for(var i=0; i

move.js

function getStyle(obj, attr)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[attr];
	}
	else
	{
		return getComputedStyle(obj, false)[attr];
	}
}
function $(id)
{
	return document.getElementById(id);
}

function setStyle3(obj, name, value)
{
	obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	obj.style[name]=value;
}

function getByClass(oParent,sClass)
{
	var aEle = oParent.getElementsByTagName('*');
	var aResult = [];
	var re=new RegExp('\\b'+sClass+'\\b', 'i');
	
	for(var i=0; i0?Math.ceil(iSpeed):Math.floor(iSpeed);
			
			//到没到
			
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
				obj.style.opacity=(iCur+iSpeed)/100;
			}
			else
			{
				obj.style[attr]=iCur+iSpeed+'px';
			}
			
			if(iCur!=json[attr])
			{
				bStop=false;
			}
		}
		
		if(bStop)
		{
			clearInterval(obj.timer);
			if(fnEnd)
			{
				fnEnd();
			}
		}
		//alert(obj.offsetHeight);
	}, 30);
}

具体图片文件不易上传，使用请自行修改

默认命名在images文件夹下