【js特效】www.zhen.com图片频道页特效

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;
}

【js特效】www.zhen.com图片频道页特效相关推荐

js实现左右点击图片层叠滚动特效
需要加载js有 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></s ...
android 仿日历翻页特效、仿htc时钟翻页特效、数字翻页切换
废话不多说,效果图: 自定义控件找自网络,使用相对简单,具体还没有来得及深入研究,只是先用笨方法大概实现了想要的效果,后续有空会仔细研究再更新文章, 本demo切换方法是用的笨方法,也就是由新数字和旧 ...
网页特效——图片翻页和图片滚动的实现方法
1. 图片翻页特效: 效果:多张图片逐个翻页显示,也可用鼠标点击图片区域下方的页码手动翻页.每张图片上都可添加链接引向不同位置的帖子. 演示:在专刊盛世奥运之奢华盘点上半部分中间"华美谢幕& ...
各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
最近看到各大门户站都有一个幻灯片特效,而且不是简单的JS特效,是FLASH和JS结合而成的觉得非常不错,今天在IT世界的原代码中查看了一下,特此发布!希望大家喜欢!有什么问题可以与我研究!<a ...
html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...
php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...
原生JS实现图片跑马灯特效
今天给大家分享一个用原生JS实现的图片跑马灯特效,效果如下: 实现的代码如下,欢迎大家复制粘贴. <!DOCTYPE html> <html><head><m ...
图片阴影html,js图片彩色阴影特效插件
image-shadow.js是一款用于制作图片彩色阴影特效的js插件.它通过CSS3 filter过滤器来生成图片对应颜色的阴影效果. 注意,IE浏览器和Edge浏览器不支持该图片彩色阴影特效. 使 ...

【js特效】www.zhen.com图片频道页特效

【js特效】www.zhen.com图片频道页特效相关推荐

最新文章

热门文章