1.效果图如下:此效果不是flash做的,flash做的效果图局限性太大,几乎很难移植到自己的项目中去
2.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>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body οnlοad="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"><!--这些都是小图,大图是通过js代码动态生成的-->
<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';//要动态生成的<img>标签id属性的值,如:<img id="image" />
var imgdir = 'http://www.zhen.com/statics/images/zhenpin/picture_images/fullsize';//大图所在路径
var imgext = '.jpg';//图片的后缀名
var thumbid = 'thumbs';//缩略图id属性,如:<ul id="thumbs">
var auto = true;//是否自动播放
var autodelay = 5;
</script>
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>
3.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)}
4.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)){//通过此段代码动态生成一个<img>标签,然后将大图赋值给<img>标签的src属性
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;
}