超强的JS相册

原创 2007年10月07日 11:20:00

加载很慢的要多 

 

效果1

<script type="text/javascript"
    src
="http://slideshow.triptracker.net/slide.js"></script>
<script defer="defer" type="text/javascript">
<!--
  
var viewer = new PhotoViewer();
  viewer.add(
'http://www.blueidea.com/articleimg/2003/12/1441/011.jpg');
  viewer.add(
'http://www.blueidea.com/articleimg/2003/12/1441/021.jpg');
  viewer.add(
'http://www.blueidea.com/articleimg/2003/12/1441/03.jpg');
  viewer.add(
'http://www.blueidea.com/articleimg/2003/12/1441/061.jpg');
  viewer.add(
'http://www.blueidea.com/articleimg/2003/12/1441/051.jpg');
//--></script>
<style type="text/css">
<!--
.Slideshow a {
    margin
-right: 5px;
    margin
-left: 5px;
    text
-decoration: none;
}
-->
</style>
<center>
<div class="Slideshow">
<a href="http://www.blueidea.com/articleimg/2003/12/1441/011.jpg" onclick="return viewer.show(0)">
<img width="70" height="70" src="http://www.blueidea.com/articleimg/2003/12/1441/011.jpg" alt="" /> </a>
<a href="photo/2.jpg" onclick="return viewer.show(1)">
<img width="70" height="70" src="http://www.blueidea.com/articleimg/2003/12/1441/021.jpg" alt="" /> </a>
<a href="photo/3.jpg" onclick="return viewer.show(2)">
<img width="70" height="70" src="http://www.blueidea.com/articleimg/2003/12/1441/03.jpg" alt="" /> </a>
<a href="photo/4.jpg" onclick="return viewer.show(3)">
<img width="70" height="70" src="http://www.blueidea.com/articleimg/2003/12/1441/061.jpg" alt="" /> </a>
<a href="photo/5.jpg" onclick="return viewer.show(4)">
<img width="70" height="70" src="http://www.blueidea.com/articleimg/2003/12/1441/051.jpg" alt="" /> </a>
<br/>
</div>
</center>

 

效果2

 

<script>
</script>
<html>
<body>
<div id="testMessage" style="border:2px solid skyblue;width:300px;height:60px"></div>
<div id="photoContrl" style="display:none">
    
<button onclick="prevPhoto()">Previous</button>
    
<button onclick="nextPhoto()">Next</button>
    
<button onclick="autoPlay()" id="pp">Play</button>
    
<button onclick="stopPlay()">Stop</button>
</div>
<div style="border:1px solid gold;width:600px;background:dodgerblue"><img src="http://bbsimg.ali213.net/customavatars/1303244.gif" id="photo" style=""></div>
</body>
</html>
<script>
    
    
function tM(Message)
    {
        $(
"testMessage").innerHTML=Message
    }
    
function dR(topr)
    {
        document.write(topr)
    }
    
function $(eleId)
    {
return document.getElementById(eleId)}
    
//预载图片
    var imasrc=new Array("http://news.mydrivers.com/img/20070813/10254068.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10254629.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10255187.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10255626.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10260076.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10260471.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10261022.jpg"
    ,
"http://news.mydrivers.com/img/20070813/10261479.jpg")//图片路径写入数组
    var preIma=new Array()
    
var dB=new Date()
    
for (i=0;i < imasrc.length;i++)//预载所有图片
    {
        preLoadImg(i)
    }
    
function preLoadImg(imgIndex)//预载指定图片图片
    {
        preIma[imgIndex]
=new Image()
        preIma[imgIndex].imgReadyStatus
=false
        preIma[imgIndex].imgIndex
=imgIndex
        preIma[imgIndex].onload
=imgLoad
        preIma[imgIndex].onerror
=imgError
        preIma[imgIndex].onabort
=imgAbort
        preIma[imgIndex].src
=imasrc[imgIndex]
    }
    
function imgLoad()//预载完成
    {
        
this.imgReadyStatus=true
    }
    
function imgError()//预载失败
    {
        preLoadImg(
this.imgIndex)
    }
    
function imgAbort()//预载取消
    {
        preIma.splice(
this.imgIndex,1)
    }
    
var checkAgain
    
function checkImgReadyStatus()//检索加载状态
    {
        
var imgReadyStatus=true
        
var persent=0
        
var dE=new Date()
        
for (i=0;i < preIma.length;i++)
        {
            
if (!preIma[i].imgReadyStatus)
            {imgReadyStatus
=false}
            
else
            {persent
++}
        }
        tM(
"完成:"+(persent/preIma.length*100).toFixed(2)+"%<br>载入:"+persent+"张图片<br>消耗时间:"+((dE-dB)/1000).toFixed(0)+"")//显示进度
        if (imgReadyStatus)
        {
            $(
"photoContrl").style.display="block"
            autoPlay()
            clearTimeout(checkAgain)
        }
        
else
        {
            checkAgain
=setTimeout(checkImgReadyStatus,1000)//检索频率
        }
    }
    checkImgReadyStatus()
    
    
//幻灯片效果
    var photoIndex=0//初始化图片索引
    var opacity=10//初始化透明度
    var direct="--"//初始化透明度矢量
    var doPlay//定义播放
    var doAutoPlay//定义自动播放
    function prevPhoto(){play(-1)}//前翻
    function nextPhoto(){play(1)}//后翻
    function autoPlay()//自动播放
    {
        
if (doAutoPlay)
        {
            clearInterval(doAutoPlay)
            doAutoPlay
=null
            $(
"pp").innerHTML="Play"
        }
        
else
        {
            play(
1)
            doAutoPlay
=setInterval("play(1)",3000)//定义自动播放频率
            $("pp").innerHTML="Pause"
        }
    }
    
function stopPlay()//停止播放
    {
        clearInterval(doAutoPlay)
        doAutoPlay
=null
        photoIndex
=0
        play(
0)
        $(
"pp").innerHTML="Play"
    }
    
function play(act)//执行动作
    {
        
if (preIma.length!=0)
        {
            
if (doPlay) {clearInterval(doPlay)}
            doPlay
=setInterval(switchPhoto,10)
            photoIndex
=(photoIndex+act+preIma.length)%preIma.length
        }
    }
    
function switchPhoto()//切换照片
    {
        eval(
"opacity"+direct)
        setOpa(opacity)
        
if (opacity <= 1
        {
            direct
="++"
            $(
"photo").src=preIma[photoIndex].src
        }
        
else if (opacity >= 10)
        {
            direct
="--"
            clearInterval(doPlay)
        }
    }
    
function setOpa(opacity)//改变透明度
    {
        
if ($("photo").style.filter!=null)
        {$(
"photo").style.filter="alpha(opacity="+opacity*10+")"}
        
else
        {$(
"photo").style.opacity=opacity/10}
    }
</script>

JS超强相册(分享大家)

html { overflow: hidden; } body { position: absolute; margin: 0px; padding: 0px; background: #1...
  • xiao_yi
  • xiao_yi
  • 2008年02月29日 16:03
  • 478

基于JS的拍照选图、相册选图

用JS实现调出摄像头拍照或从手机相册选择图片,然后返回移动终端,此处以Android为例(Eclipse工程),ios上也是一样的,其原理不依赖于移动终端原生API,而依赖于JS库jquery、cor...
  • jamkier
  • jamkier
  • 2015年01月26日 16:55
  • 798

js实现获取手机相册并上传

转载请标记出处http://blog.csdn.net/qq_32635069/article/details/72869100我将前面的代码写成了一个Demo,没有看懂的可以从github上下载来,...
  • qq_32635069
  • qq_32635069
  • 2017年06月05日 17:06
  • 6086

android webview js交互 调取本地相册(兼容各个版本)并且上传到服务器端。

android webview  js交互,调取本地相册,并且实现上传。             首先我们要理解整个互动过程,在网页webview的的组件是 input输入框,输入类型为file,点击...
  • oAAWangWei123456789
  • oAAWangWei123456789
  • 2016年03月30日 16:42
  • 1601

js之相册预览效果

最近公司没有太多的项目,自己本身也是小白一枚,这几天就自己用js实现了一些小的功能,一方面想提高自己的js功底,一方面也希望给更多的小白们可以参考一下,一些大神们如果觉得有哪些不足的可以指点迷津哦,在...
  • qq_36671474
  • qq_36671474
  • 2017年02月17日 11:10
  • 331

js实现添加相册图片

现在评价除了写一些内容之外,还会进行一些星级评价,上传照片等。 我拿着网上的一些代码,并进行了一些修改,有需要的朋友可以参考一下。 测试页面 window.onload = fun...
  • qq_25280063
  • qq_25280063
  • 2016年11月04日 10:58
  • 146

超强OCR文字识别软件首选ABBYY FineReader

提到纸质文档—转换—文本格式—可编辑这些字眼,相信大家的第一反映都是OCR文字识别软件,如何排除错误或利用辅助信息提高识别正确率,是OCR最重要的课题,衡量一个OCR系统性能好坏的主要指标无非是精确度...
  • ABBYY2015
  • ABBYY2015
  • 2017年04月25日 09:49
  • 574

JS中兼容实现android和ios系统手机打开相机并可选择相册功能

在非UI线程中进行对UI的更新或处理,报出此错误。一般解决方式有以下几种: 1,使用最底层的handler方法解决 2,使用对handler进行封装了的RunOnUIThread()解决,以及通过...
  • zxc514257857
  • zxc514257857
  • 2017年02月27日 00:34
  • 925

jquery超炫瀑布流相册插件特效代码--适合做个人博客相册

原文:jquery超炫瀑布流相册插件特效代码--适合做个人博客相册 源代码下载地址:http://www.zuidaima.com/share/1836658716642304.htm ...
  • yaerfeng
  • yaerfeng
  • 2016年09月02日 09:37
  • 1587

关于 HTML5 调用用户的 照相机、相册 初步整理

我能找到的是 UC 插件平台(http://plus.uc.cn/document/plugin/doc1.html),当前只支持调用照相机,尚不支持调用相册。如文档截图(http://plus.uc...
  • zhangxin09
  • zhangxin09
  • 2014年07月28日 09:48
  • 46072
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:超强的JS相册
举报原因:
原因补充:

(最多只允许输入30个字)