AJAX Photo Gallery特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 AJAX Photo Gallery特效代码的示例演示效果:

当前平台(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="此代码内容为AJAX Photo Gallery，属于站长常用代码" />
<title>AJAX Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body onload="slideShow()">
<div id="gallery">
  <div id="imagearea">
    <div id="image">
      <a href="javascript:imgNav(-1)" class="imgnav " id="previmg"></a>
      <a href="javascript:imgNav(1)" class="imgnav " id="nextimg"></a>
    </div>
  </div>
  <div id="thumbwrapper">
    <div id="thumbarea">
      <ul id="thumbs">
        <li value="1"><img src="thumbs/1.jpg" width="179" height="100" alt="" /></li>
        <li value="2"><img src="thumbs/2.jpg" width="179" height="100" alt="" /></li>
        <li value="3"><img src="thumbs/3.jpg" width="179" height="100" alt="" /></li>
        <li value="4"><img src="thumbs/4.jpg" width="179" height="100" alt="" /></li>
        <li value="5"><img src="thumbs/5.jpg" width="179" height="100" alt="" /></li>
      </ul>
    </div>
  </div>
</div>

<script type="text/javascript">
var imgid = 'image';
var imgdir = 'fullsize';
var imgext = '.jpg';
var thumbid = 'thumbs';
var auto = true;
var autodelay = 5;
</script>
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>

JS代码(slide.js):

var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;
	ta = document.getElementById(thumbid);
	ia = document.getElementById(imgid);
	t = ta.getElementsByTagName('li')ie = document.all ? true:false;
	st = 3;
	ss = 3;
	ft = 10;
	fs = 5;
	xp,yp = 0;
	document.onmousemove = getPos;
	function slideShow(){
	var taw = ta.parentNode.offsetWidth;
	var taa = taw / 4;
	bxs = leftPos(ta);
	bxe = bxs + taa;
	fxe = bxs + taw;
	fxs = fxe - taa;
	ys = topPos(ta);
	ye = ys + ta.offsetHeight;
	var len = t.length;
	tar = [];
	for(i=0;
	i < len;
	i++){
	var id = t[i].value;
	tar[i] = id;
	t[i].onclick = new Function("getImg('" + id + "')");
	if(i == 0){
	getImg(id);
}
}
tarl = tar.length;
}
function scrlThumbs(d){
	clearInterval(ta.timer);
	var l;
	if(d == -1){
	l = 0;
}
else{
	l = t[tarl-1].offsetLeft - (ta.parentNode.offsetWidth - t[tarl-1].offsetWidth) + 10;
}
ta.timer = setInterval(function(){
	scrlMv(d,l)}
,st);
}
function scrlMv(d,l){
	ta.style.left = ta.style.left || '0px';
	var left = ta.style.left.replace('px','');
	if(d == 1){
	if(l - Math.abs(left) <= ss){
	cnclScrl(ta.id);
	ta.style.left = '-' + l + 'px';
}
else{
	ta.style.left = left - ss + 'px';
}
}
else{
	if(Math.abs(left) - l <= ss){
	cnclScrl(ta.id);
	ta.style.left = l + 'px';
}
else{
	ta.style.left = parseInt(left) + ss + 'px';
}
}
}
function cnclScrl(){
	clearTimeout(ta.timer)}
function getImg(id){
	if(auto){
	clearTimeout(ia.timer)}
if(ci != null){
	var ts = ia.getElementsByTagName('img');
	var tsl = ts.length;
	var x = 0;
	for(x;
	x < tsl;
	x++){
	if(ci.id != id){
	var o = ts[x];
	clearInterval(o.timer);
	o.timer = setInterval(function(){
	fdOut(o)}
,fs);
}
}
}
var i;
	if(!document.getElementById(id)){
	i = document.createElement('img');
	ia.appendChild(i);
	i.id = id;
	i.av = 0;
	i.style.opacity = 0;
	i.style.filter = 'alpha(opacity=0)';
	i.src = imgdir + '/' + id + imgext;
}
else{
	i = document.getElementById(id);
	clearInterval(i.timer);
}
i.timer = setInterval(function(){
	fdIn(i)}
,fs);
}
function imgNav(d){
	var curr = 0;
	for(key in tar){
	if(tar[key] == ci.id){
	curr = key;
}
}
if(tar[parseInt(curr) + d]){
	getImg(tar[parseInt(curr) + d]);
}
else{
	if(d == 1){
	getImg(tar[0]);
}
else{
	getImg(tar[tarl - 1]);
}
}
}
function autoSlide(){
	ia.timer = setInterval(function(){
	imgNav(1)}
,autodelay * 1000);
}
function fdIn(i){
	if(i.complete){
	i.av = i.av + fs;
	i.style.opacity = i.av / 100;
	i.style.filter = 'alpha(opacity=' + i.av + ')';
}
if(i.av >= 100){
	if(auto){
	autoSlide()}
clearInterval(i.timer);
	ci = i;
}
}
function fdOut(i){
	i.av = i.av - fs;
	i.style.opacity = i.av / 100;
	i.style.filter = 'alpha(opacity=' + i.av + ')';
	if(i.av <= 0){
	clearInterval(i.timer);
	if(i.parentNode){
	i.parentNode.removeChild(i)}
}
}
function getPos(e){
	if(ie){
	xp = event.clientX + document.body.scrollLeft;
	yp = event.clientY + document.body.scrollTop;
}
else{
	xp = e.pageX;
	yp = e.pageY;
}
if(xp < 0){
	xp = 0}
if(yp < 0){
	yp = 0}
if(xp > bxs && xp < bxe && yp > ys && yp < ye){
	scrlThumbs(-1);
}
else if(xp > fxs && xp < fxe && yp > ys && yp < ye){
	scrlThumbs(1);
}
else{
	cnclScrl();
}
}
function leftPos(t){
	var left = 0;
	if(t.offsetParent){
	while(1){
	left += t.offsetLeft;
	if(!t.offsetParent){
	break}
t = t.offsetParent;
}
}
else if(t.x){
	left += t.x;
}
return left;
}
function topPos(t){
	var top = 0;
	if(t.offsetParent){
	while(1){
	top += t.offsetTop;
	if(!t.offsetParent){
	break}
t = t.offsetParent;
}
}
else if(t.y){
	top += t.y;
}
return top;
}

CSS代码(css.css):

*{margin:0;padding:0}
body{font:12px Verdana,Arial,Helvetica,sans-serif;background:#666 url(../images/bg.gif)}
#gallery{width:686px;margin:40px auto;padding:10px;border:6px solid #fff;background:#AAA}
#images{border:2px solid #9ac1c9;height:225px;background:#eef5f6;margin-bottom:20px}
#image{position:relative;width:672px;height:375px;padding:5px;border:2px solid #666;background:#FFF url(../images/loading.gif) center center no-repeat}
#image img{position:absolute;top:5px;left:5px}
#thumbwrapper{margin-top:10px;padding:5px 0;width:682px;height:100px;border:2px solid #666;background:#FFF}
#thumbarea{position:relative;overflow:hidden;height:100px;width:682px;}
#thumbs{position:absolute;list-style:none;margin-left:5px;height:100px;width:5000px;border-right:5px solid #FFF}
#thumbs li{float:left;margin-right:5px;cursor:pointer}
.imgnav{position:absolute;height:375px;width:20%;z-index:100;height:375px;width:20%;z-index:100;outline:none;cursor:pointer}
#previmg{left:0;background:url(../images/left.gif) left center no-repeat;border-left:5px solid #FFF}
#previmg:hover{opacity:1;filter:alpha(opacity=100)}
#nextimg{right:0;background:url(../images/right.gif) right center no-repeat;border-right:5px solid #FFF}
#nextimg:hover{opacity:1;filter:alpha(opacity=100)}

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