超强的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>

Handlerbar.js——Ajax组装html的超强模板工具学习实践

一、背景介绍 在JSP页面开发中,关于页面中html代码的组建方式有两种: 1、在JSP页面使用jsp语言或等标签进行组建,优点:保持html原有格式,缺点:占用大量服务器资源,而...

js超强表单验证

表单验证类 Validator v1.05    body,td{font:normal 12px Verdana;color:#333333}  input,textarea,select,t...

Ajax+js+dom+json+php+mysql实现仿百度、google超强分页效果

/* 几个关键的变量: 当前页 总页数 吗,每页大小 */ //定义当前页 include "./include/dbConn.php";   if(isset($_GET['np'])){...

用Gzip进行js的超强压缩

Gzip的官方网址为:  http://www.gnu.org/software/gzip/  Gzip的使用很简单  解压至某个目录,会看到有一个Gzip.exe文件,然后在命令窗口进入该目录,...
  • yipanbo
  • yipanbo
  • 2016年08月17日 11:21
  • 3003

Ajax+js+dom+json+php+mysql实现仿google的超强分页、隔行变色效果

Paging.php文件 include "../../../include/dbConn.php"; /* 定义几个关键的变量   */   if(isset($_GET['np'...

浏览器+js实现超强的搜索访问功能

javascript: (function() { var txt = document.getSelection(); var txt0 = txt.replace(/\s+/g, ...

超强 DOM增删改,js日历综合案例实现

DOM增删改,js日历综合案例实现

js身份证验证超强脚本

function checkIdcard(idcard){ var Errors=new Array( "验证通过!", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有...

用Gzip进行js的超强压缩 收藏

用Gzip进行js的超强压缩 收藏 Gzip的官方网址为:http://www.gnu.org/software/gzip/Gzip的使用很简单解压至某个目录,会看到有一个Gzip.exe文件,然后在...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:超强的JS相册
举报原因:
原因补充:

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