当前位置:七道奇文章资讯网站建设网站美工
日期:2010-10-12 08:45:00  来源:本站整理

相册的自动播放效果SlideShow[网站美工]

赞助商链接



  本文“相册的自动播放效果SlideShow[网站美工]”是由七道奇为您精心收集,来源于网络转载,文章版权归文章作者所有,本站不对其观点以及内容做任何评价,请读者自行判断,以下是其具体内容:

  写了个SlideShow的原型,操纵image的complete,判断图片能否调用完好,调用完好今后才显示,不然是LOADING的图片,还考虑的是

  1.每调用一张图片之前先呈现loading的历程,

  2.调用图片中不会因为网速和图片过大而未显示全,直接跳到下一张,要按次序一张一张播放.

  3.第一次 播放的时刻,因为调用图片会慢一点,重新播放是调用CACHE里的,速度就快了

  <html>

  <head>

  <title>SlideShow</title>

  <script language="JavaScript1.1">

  <!--

  var yourImages = new Array("Flash制作翻书效果的本性相册

  var yourImages = new Array("<A href='http://webdesign.chinaitlab.com/UploadFiles_8014/201003/20100320150545903.jpg")

  var currCount=0

  var stop=false

  function getimg(n){

  preImages= new Image()

  preImages.src = yourImages[n]

  }

  function autoPlay(){

  if(currCount!=yourImages.length){

  document.getElementById("img").style.display="none"

  getimg(currCount)

  document.getElementById("loadingbar").style.display="block"

  setTimeout("loadingImg()",1000)

  }

  else{

  currCount=0;

  if (confirm("播放完毕,能否重新播放?")){

  return autoPlay()

  }

  }

  }

  function loadingImg(){

  if (preImages.complete) {

  document.getElementById("img").src="

  document.getElementById("loadingbar").style.display="none"

  document.getElementById("img").style.display="block"

  document.getElementById("img").src=yourImages[currCount]

  currCount=currCount+1

  }

  setTimeout("autoPlay()",4000)

  }

  //-->

  </script>

  </head>

  <body bgcolor="#FFFFFF">

  <div style="width:700px">

  <center>

  <a href="javascript:autoPlay()">自动播放</a><br><br>

  <div id="loadingbar"  style="display:none;"><img src=http://webdesign.chinaitlab.com/UploadFiles_8014/201003/20100320150546472.gif></div>

  <img id="img" src=http://webdesign.chinaitlab.com/UploadFiles_8014/201003/20100320150555917.gif >

  <center>

  </div>

  </body>

  </html>

 

  以上是“相册的自动播放效果SlideShow[网站美工]”的内容,如果你对以上该文章内容感兴趣,你可以看看七道奇为您推荐以下文章:
  • 相册的自动播放效果SlideShow
  • 本文地址: 与您的QQ/BBS好友分享!
    • 好的评价 如果您觉得此文章好,就请您
        0%(0)
    • 差的评价 如果您觉得此文章差,就请您
        0%(0)

    文章评论评论内容只代表网友观点,与本站立场无关!

       评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
    Copyright © 2020-2022 www.xiamiku.com. All Rights Reserved .