JS網(wǎng)頁圖片播放效果之一[底部帶縮略圖].doc

JS網(wǎng)頁圖片播放效果之一底部帶縮略圖昨天逛鳳凰網(wǎng)看到視頻主頁上的圖片播放效果挺好，模仿（僅樣子）了下來，很久沒有折騰這些，當(dāng)作練習(xí)吧，與大家分享。一、效果圖：二、背景圖片下載： 保存為scrollpicbg.png三、測(cè)試要求： 1.將下面的代碼保存為XXX.html文件。 2.下載上面的背景圖，另外再弄7張圖分名為1.jpg、2.jpg7.jpg，新建一個(gè)文件夾：images，將圖片一起保存到里頭。四、測(cè)試代碼：!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title無標(biāo)題文檔/titlestyle type=text/css.scrollPicBox height:375px; width:700px; border:1px solid #000;.scrollPicBox .movPicBg position:absolute; height:70px; margin-top:305px; background-color:#000; width:700px; z-index:300; filter:alpha(opacity=40);-moz-opacity:0.4; -khtml-opacity: 0.4; opacity: 0.4;.scrollPicBox .movPic position:absolute; height:70px; margin-top:305px; width:700px; z-index:301;.scrollPicBox #showpic height:375px; width:700px; background-color:#000.scrollPicBox a.prev height:70px; width:35px; float:left; display:block; background:url(images/scrollpicbg.png) no-repeat 5px 5px;.scrollPicBox a.prev:hoverheight:70px; width:35px; float:left; display:block; background:url(images/scrollpicbg.png) no-repeat -49px 5px;.scrollPicBox a.next height:70px; width:35px; float:right; display:block;background:url(images/scrollpicbg.png) no-repeat -22px 5px;.scrollPicBox a.next:hoverheight:70px; width:35px; float:right; display:block;background:url(images/scrollpicbg.png) no-repeat -78px 5px;.scrollPicBox .picbox height:70px; width:628px; float:left;.scrollPicBox #picbox a.a display:inline; float:left; height:54px; width:78px; margin-left:10px; background:url(images/scrollpicbg.png) -119px 0px;margin-top:6px;.scrollPicBox #picbox a.b display:inline; float:left; height:54px; width:78px; margin-left:10px; background:url(images/scrollpicbg.png) -202px 0px; margin-top:6px;filter:alpha(opacity=100);-moz-opacity:1; -khtml-opacity:1; opacity:1;.scrollPicBox #picbox img.aheight:44px; width:74px; border:1px; margin:8px 0px 0px 2px; filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;.scrollPicBox #picbox img.bheight:44px; width:74px; border:1px; margin:8px 0px 0px 2px; filter:alpha(opacity=100);-moz-opacity:1; -khtml-opacity:1; opacity:1;/style/headbodydiv class=scrollPicBox div class=movPicBg/div div class=movPic a class = prev href=javascript:void(0) onclick=playPic(-1)/a div id=picbox a class=b href=javascript:void(0)img src=images/1.jpg height=44 width=74 border=0 /a a class=a href=javascript:void(0)img src=images/2.jpg height=44 width=74 border=0 /a a class=a href=javascript:void(0)img src=images/3.jpg height=44 width=74 border=0 /a a class=a href=javascript:void(0)img src=images/4.jpg height=44 width=74 border=0 /a a class=a href=javascript:void(0)img src=images/5.jpg height=44 width=74 border=0 /a a class=a href=javascript:void(0)img src=images/6.jpg height=44 width=74 border=0 /a a class=a href=javascript:void(0)img src=images/7.jpg height=44 width=74 border=0 /a /div a class = next href=javascript:void(0) onclick=playPic(1)/a /div div id=showpic img id=scrollPic src=images/1.jpg width=700 height=375/ /div/divscript language=javascriptvar nIndex = 0;var nAlpha = 0;function $(id)return document.getElementById(id);var arrImages = $(picbox).getElementsByTagName(img);var scrollPicTimer,scrollPicTimeout;for(i=0;iarrImages.length;i+)arrImagesi.className = a;arrImagesi.id = String(i);arrImagesi.onmouseover = function()nIndex = Number(this.id);setPicStyle(this);scrollPicTimer = setInterval(playPic(1),3000);function setPicStyle(o)for(i=0;iarrImages.length;i+)arrImagesi.className = a;arrImagesi.parentNode.className = a;o.className = b;o.parentNode.className = b;var pic = $(scrollPic);pic.src = o.src;clearInterval(scrollPicTimer);clearTimeout (scrollPicTimeout);nAlpha = 0;setAlpha();scrollPicTimer = setInterval(playPic(1),3000);function setAlpha()nAlpha += Math.ceil(100 - nAl