JavaScript相册预览

直接上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>相册</title>
<script type = "text/javascript">//记录<img>对象的数组var images = [];//初始化事件处理函数function initdsy () {//所有的<img>元素alert('44');var imgArr= document.getElementsByTagName("img");for(var i=0;i<imgArr.length;i++){//找到所有class=img的<img>元素if(imgArr[i].className=="img"){//保存在imgages数组中images.push(imgArr[i]);//添加mouseover事件处理函数addEventListener(imgArr[i],"mouseover",handleEvent);}}}//添加事件处理函数function addEventListener(ele,type,func){//DOM兼容浏览器if(ele.addEventListener){ele.addEventListener(type,func,false);}else  {//IEele.attachEvent("on" + type,func);}}//  在mouseover事件的处理函数handleEvent中找到图片位置，显示该图片。function handleEvent(evt) {//事件对象var event = window.event ? window.event : evt;//事件源：预览图对象var target =event.target ? event.target : event.srcElement;//找到当前图片的位置for(var i = 0;i <images.length;i++){if(images[i] ==target)  break;}//200ms延时之后显示该图片setTimeout(function (){go(i);}, 200);}function go(i) {$("showpic").src=images[i].src;$("show").style.display = "";var next =(i+1)%images.length;// alert(i+'ss');var prev=(i-1+images.length)%images.length;// alert(prev+'prev');// alert(next+'next');$("prev").onclick = function(){setTimeout(function (){//     alert("111");go(prev);},200);};//设置"下一张"按钮的事件处理函数$("next").onclick = function(){//200ms之后切换到下一张图片setTimeout(function () {//alert("111");go(next);},200);};}function $(id){return document.getElementById(id);}//隐藏大图显示区域function hide() {$("show").style.display="none";}</script><style type="text/css">* {Font-family:Tahoma;Font-size:12pt;Text-align:center;Margin:0 auto;}Body{Margin:10px;}.img{Height:80px;Cursor:pointer;margin:0;}#gallary{float:left;height:80px;Text-align:center;}.bdr {border-top:4px dashed;border-bottom:4px dashed;clear:both;}#show {position:absolute;top:200px;left:250px;backgrond-color:#313131;padding:10px 10px 10px 10px;}#showpic{cursor:pointer;   margin-bottom:5px;}#prev,#next {cursor:pointer;color:#111111;font-weight:bold;}</style></head><body οnlοad="initdsy()"><div class="bdr"></div><div id="gallay"><img class="img" src="pic1.jpg" alt="pic1"><img class="img" src="pic2.jpg" alt="pic2"><img class="img" src="pic3.jpg" alt="pic3"><img class="img" src="pic4.jpg" alt="pic4"><img class="img" src="pic5.jpg" alt="pic5"></div><div class="bdr"></div><div id="show" style="display:none"><img id="showpic"src="" alt="" οnclick="hide()" /><div><span id="prev">上一张</span><span id="next">下一张</span> </div></div></body></html>

go(i)的作用是切换到第i张图片，该函数还负责设置"上一张"。"下一张"按钮的click事件处理函数

JavaScript相册预览相关推荐

基于9款CSS3鼠标悬停相册预览特效
基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="albums& ...
JavaScript Light BOX相册预览功能
[相关教程](https://www.runoob.com/w3cnote/javascript-lightbox.html) Light Box html 原理: 1.将项目分成两部分第一部分:没 ...
photoswipe 移动端PC端兼容图片相册预览
由于安卓项目涉及到h5页面嵌入,需要查看图片相册集,本来打算使用baguetteBox,但是它不太兼容手机,并且页面效果跟灵活性欠缺,后来在文档中看到PhotoSwipe,虽然开发者很懒,好多东西东西 ...
ios 模仿系统相册预览
系统相册的视频和图片左滑动和右边滑动都是可以看下一张图片的然后有视频还能够播放视频考虑到图片很多需要使用复用所以采用 collectionview 来实现让cell 和屏幕的大小相等 c ...
js前端实现多图图片上传预览的两个方法
一.将图片转成icon码的实现方式,手动多个效果图: 代码片段: <!DOCTYPE html> <html lang="zh-cn"> <head ...
客户端脚本调用服务器端动态内容，移动到链接显示预览
aspx页面代码 <script language="javascript" type="text/javascript"> //图片预览效果 fu ...
安卓图片操作（调用系统相机，预览本地照片，调用系统裁剪图片，压缩图片，中心裁剪方形图片，bitmap转byte[]）
先创建照片存储uri public static Uri createImagePathUri(Context context) {Uri imageFilePath = null;String st ...
图片上传预览原理及实现
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便.一直以来也就只是用用,没有想过这些插件背后的实现原理.趁着今天有点时间,也来学习学习. 追根溯源设想原理 Data ...
市委组织部项目--word上传，下载，预览，删除
需求:市委组织部考核项目,既然是考核项目就会有很多考核标准要求等,而且各个下属单位对于被考核指标的结果需要上传.这些过程都是通过文档实现的.也就是需要word文档的上传,下载,预览等功能. Word上 ...

JavaScript相册预览

JavaScript相册预览相关推荐

最新文章

热门文章