关闭

超强的JS相册

2153人阅读 评论(0) 收藏 举报

加载很慢的要多 

 

效果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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:500046次
    • 积分:6128
    • 等级:
    • 排名:第4260名
    • 原创:168篇
    • 转载:105篇
    • 译文:0篇
    • 评论:60条
    文章分类
    最新评论
    游戏多