效果演示：
http://sandbox.leigeber.com/slideshow/
难点：响应鼠标事件实现滑动效果
项目目录：
![]()
files文件夹下的几个文件夹都是放的图片，fullsize里面是大图，thumbs里面是小图。其中那个.png文件是测试用的图片
页面部分：
<html>
<head>
<link rel="stylesheet" type="text/css" href="files/style.css" />
</head>
<body>
<div id="gallery">
<div id="imagearea">
<div id="image">
<!-- 前后翻页的设置 -->
<a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a>
<a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<!-- span元素的value属性指明与img元素指明的图片的大图文件名匹配，但不包含后缀名,
例如第一个span元素表示files/thumbs/1.jpg与aaa.jpg匹配
-->
<span value="aaa"><img src="files/thumbs/1.jpg" width="179" height="100" /></span>
<span value="bbb"><img src="files/thumbs/2.jpg" width="179" height="100" /></span>
<span value="ccc"><img src="files/thumbs/3.jpg" width="179" height="100" /></span>
<span value="ddd"><img src="files/thumbs/4.jpg" width="179" height="100" /></span>
<span value="eee"><img src="files/thumbs/5.jpg" width="179" height="100" /></span>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var imgid = 'image'; //显示大图的div
var imgdir = 'files/fullsize'; //大图的存储文件夹相对路径（相对于js文件）
var imgext = '.jpg'; //以.jpg分割文件名数组，也就是图片的后缀名,目前好像还不支持多文 // 件名分割
var thumbid = 'thumbs'; //显示小图元素的id
var auto = true; //开启自动刷新
var autodelay = 5; //间隔时间5秒
</script>
<script type="text/javascript" src="files/slide.js"></script>
</body>
</html>
css部分：
* {margin:0; padding:0;}
body {font:12px Verdana, Arial, Helvetica, sans-serif; background:#666 url(images/bg.gif)}
#gallery {position:relative; 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:10000px; 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)}
js部分：
var slideShow=function(){
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('span'); ie=document.all?true:false;
st=3; ss=3; ft=10; fs=5; xp,yp=0;
return{
init:function(){
document.onmousemove=this.pos; window.onresize=function(){setTimeout("slideShow.lim()",500)};
ys=this.toppos(ta); ye=ys+ta.offsetHeight;
len=t.length;tar=[];
for(i=0;i<len;i++){
var id=t[i].value; tar[i]=id;
t[i].onclick=new Function("slideShow.getimg('"+id+"')");
if(i==0){this.getimg(id)}
}
tarl=tar.length;
},
scrl:function(d){
clearInterval(ta.timer);
var l=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10)
ta.timer=setInterval(function(){slideShow.mv(d,l)},st);
},
mv:function(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){
this.cncl(ta.id); ta.style.left='-'+l+'px';
}else{ta.style.left=left-ss+'px'}
}else{
if(Math.abs(left)-l<=ss){
this.cncl(ta.id); ta.style.left=l+'px';
}else{ta.style.left=parseInt(left)+ss+'px'}
}
},
cncl:function(){clearTimeout(ta.timer)},
getimg:function(id){
if(auto){clearTimeout(ia.timer)}
if(ci!=null){
var ts,tsl,x;
ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;
for(x;x<tsl;x++){
if(ci.id!=id){var o=ts[x]; clearInterval(o.timer); o.timer=setInterval(function(){slideShow.fdout(o)},fs)}
}
}
if(!document.getElementById(id)){
var 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(){slideShow.fdin(i)},fs);
},
nav:function(d){
var c=0;
for(key in tar){if(tar[key]==ci.id){c=key}}
if(tar[parseInt(c)+d]){
this.getimg(tar[parseInt(c)+d]);
}else{
if(d==1){
this.getimg(tar[0]);
}else{this.getimg(tar[tarl-1])}
}
},
auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},
fdin:function(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){this.auto()}; clearInterval(i.timer); ci=i}
},
fdout:function(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)}}
},
lim:function(){
var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;
bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;
},
pos:function(e){
xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;
yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;
if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){
slideShow.scrl(-1);
}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){
slideShow.scrl(1);
}else{slideShow.cncl()}
},
leftpos:function(t){
var l=0;
if(t.offsetParent){
while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.x){l+=t.x}
return l;
},
toppos:function(t){
var p=0;
if(t.offsetParent){
while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent}
}else if(t.y){p+=t.y}
return p;
}
};
}();
window.onload=function(){slideShow.init(); slideShow.lim()};
分享到：
相关推荐
web网页开发，JavaScript完整代码实现，包含实验报告
个JS类库，参考了网上部分此类代码，在此非常谢谢这些无名英雄。本类库可以自动按比例缩放图片，而小图导航可设置显示张数、间距，与CSS配合可横向或纵向等功能。
| ImageSee是开放源代码的纯javascript网页图片浏览器 | ImageSee支持IE/FF/Oper多种浏览器，服务器端为静态网页，无需asp/php等脚本支持 | 调用时使用“?pic=图片的网址&page=该图片相关网页的网址”作为网址参数，...
一个JavaScript实现的漂亮图片浏览器，比较适合相册等图片浏览使用……
图片旋转，图片的鼠标拖拽移动，图片下载，图片切换，全屏展示等功能###3:动态实时监控图片状态当指定区域内图片发生添加或删除时可动态更新###4:多实例支持在一个网页实现多个图片浏览器实例，图片浏览器之间互不...
关于ImageSee： ImageSee是开放源代码的网页图片浏览器，由JavaScript写成，是一个完全静态网页。同时支持IE Firefox Opera浏览器。 透过ImageSee，您可以方便的对网上的高清图片(大图片)进行浏览，具备常规的...
实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念，设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局，注重...
9.5 打开一个四面变大的窗口 237 9.6 定时打开新的窗口 238 9.7 转动出现的窗口 239 9.8 自动弹出的窗口 241 9.9 自动消失的广告窗口 242 9.10 窗口的震动效果 243 9.11 同时打开10个窗口 244 9.12 检测系统...
实例307 禁止用户复制网页内容(方法一) 490 实例308 禁止用户复制网页内容(方法二) 491 实例309 禁止网页另存为 492 12.2 禁止用户刷新屏幕 493 实例310 屏蔽IE主菜单 493 实例311 屏蔽键盘相关事件 494...
缓存提高了浏览器的访问效率，但有时也会带来负面效果，那就是服务器端的内容变化不能被实时地反映到客户端（如动态产生的图片文件和JavaScript脚本文件不能及时更新的问题）。有三个HTTP响应头字段都可以禁止浏览器...
fetchImg：一种提取网页图片数据的浏览器插件
它提供了一些灵活的配置，能够帮助用户快速搭建起一个强大的图片分享平台。通过这些配置，用户还可以非常方便的同时上传多张图片，或将图片以指定的格式上传，免去手动转换图片格式的烦恼。 在最新版的图片上传控件...
图片渐隐的效果能够使网站更加有特色，下面就介绍给大家如何使用，Javascript来制作图片的这种特效。本段代码要输入在网页中和之间才可以，详细代码如下
优分享浏览器是安卓平台下的一个多标签的简洁移动网页浏览器源代码完全开放，你可以自由改进它或者基于它制作一些独特的工具，也可以嵌入到你的APP中提供移动网页浏览或分享功能。您可以点击页面中的图片，分享该...
360安全浏览器的垃圾桶扩展, 自助过滤网页上的不良信息, 支持 Ctrl+鼠标右键点击 将指向的网页元素丢入垃圾桶. 丢入垃圾桶的垃圾信息将立刻消失,并且会在以后浏览网页时被过滤掉. 同时也支持撤销操作, 撤销后会即时...
某些网页上的操作会导致无故多开一个页面. 用户界面 WindowsXP系统下启动浏览器侧边栏显示异常. 选项 不自动登录账户的情况下,登录账户后,"只允许打开一个浏览器窗口"选项不起作用 智能地址栏 输入法上屏的字母地址...
内容索引:脚本资源,HTML,网页游戏,魔塔 ... 2010-11-28 第一个图片资源版本（v0.2.1.3267）。 2010-11-23 发布 圈圈版（v0.1.6.2970）。 2010-11-14 线上发布第一个版本。 2010-11-11 开始编写这个游戏。
javascript选项卡自动、手动切换可以兼容所有浏览器。自动切换可以给网页带来更好的效果。