超强的JS相册

加载很慢的要多 

 

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