js圖片自動切換代碼

2009-11-26 圖片特效 ℃

<script>
var zoomimages=new Array("/edu/img/js/200909/8.jpg","/edu/img/js/200909/7.jpg","/edu/img/js/200909/5.jpg","/edu/img/js/200909/4.jpg","/edu/img/js/200909/3.jpg")
</script>
<script>
// more javascript from /
var imgpreload=new Array()
for (i=0;i<=zoomimages.length;i++) {
 imgpreload[i]=new Image()
 imgpreload[i].src=zoomimages[i]
}
var zoomfactor=8
var positionleft=0
var positiontop=0
var timer
var marginright=0
var i_fadestrength=5
var i_images=0
var step=1
var content
var imageboxwidthriginal=0
var imageboxwidth=0
var imageboxheight=0
var bodywidth=0
var bodyheight=0
function setimage() {
 document.all.imagebox.style.visibility="hidden"
 bodywidth=document.body.clientWidth
 bodyheight=document.body.clientHeight
 if (i_images>=zoomimages.length) {i_images=0}
 content="<img name='newpic' src='"+zoomimages[i_images]+"'>"
 imagebox.innerHTML=content
 imageboxwidthoriginal=document.newpic.width
 content="<img name='newpic' src='"+zoomimages[i_images]+"' width=1>"
 imagebox.innerHTML=content
 document.all.imagebox.style.visibility="visible"
 imagebox.filters.alpha.opacity=100
 zoomin()
}
function zoomin() {
 if (imageboxwidth<(imageboxwidthoriginal/1.3)) {
  imageboxwidth+=zoomfactor
  content="<img name='newpic' src='"+zoomimages[i_images]+"' width='"+imageboxwidth+"'>"
  imagebox.innerHTML=content
  imageboxwidth=document.newpic.width
  imageboxheight=document.newpic.height
  document.all.imagebox.style.posLeft=bodywidth/2-imageboxwidth/2
  document.all.imagebox.style.posTop=bodyheight/2-imageboxheight/2
  document.all.imagebox.style.overflowX="hidden"
  document.all.imagebox.style.visibility="visible"
  step+=1.1
  imageboxwidth+=step
  timer=setTimeout("zoomin()",50)
}
else {
 clearTimeout(timer)
 content="<img name='newpic' src='"+zoomimages[i_images]+"' width='"+imageboxwidthoriginal+"'>"
 imagebox.innerHTML=content
 imageboxwidth=document.newpic.width
 imageboxheight=document.newpic.height
 document.all.imagebox.style.posLeft=bodywidth/2-imageboxwidth/2
 document.all.imagebox.style.posTop=bodyheight/2-imageboxheight/2
 document.all.imagebox.style.overflowX="hidden"
 document.all.imagebox.style.visibility="visible"
 i_fadestrength=0;
 timer=setTimeout("zoomout()",2000)
 }
}
function zoomout() {
if (i_fadestrength<120) {
 imageboxwidth+=zoomfactor
 content="<img name='newpic' src='"+zoomimages[i_images]+"' width='"+imageboxwidth+"'>"
 imagebox.innerHTML=content
 imageboxwidth=document.newpic.width
 imageboxheight=document.newpic.height
 imagebox.filters.alpha.opacity=Math.floor(100-i_fadestrength)
 document.all.imagebox.style.posLeft=bodywidth/2-imageboxwidth/2
 document.all.imagebox.style.posTop=bodyheight/2-imageboxheight/2
 document.all.imagebox.style.overflowX="hidden"
 document.all.imagebox.style.visibility="visible"
 step+=1.5
 i_fadestrength+=step
 timer=setTimeout("zoomout()",50)
}
else {
 clearTimeout(timer)
 i_fadestrength=0;
 step=1;
 i_images++
 imageboxwidth=0
 setimage()
 }
}
if (document.all) {
 document.write("<div   class="tdphlzx"   id='imagebox' style='position:absolute;filter:alpha(opacity=0);'></DIV>")
}
if (document.all) {
 onload=setimage
}
</script>

相關(guān)特效代碼

熱門特效代碼: js圖片自動切換代碼; CSS實現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動圖片廣告代碼; 鼠標(biāo)經(jīng)過圖片變大; 簡單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動，; 點擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡單高效的javascript 幻燈片播放; 飄動圖片廣告代碼; JavaScript封裝的平滑圖片滾動，; 超酷超絢精美圖片展示效果代碼