JS網頁圖片播放效果之一底部帶縮略圖昨天逛鳳凰網看到視頻主頁上的圖片播放效果挺好，模仿（僅樣子）了下來，很久沒有折騰這些，當作練習吧，與大家分享。一、效果圖：二、背景圖片下載： 保存為scrollpicbg.png三、測試要求： 1.將下面的代碼保存為XXX.html文件。 2.下載上面的背景圖，另外再弄7張圖分名為1.jpg、2.jpg7.jpg，新建一個文件夾：images，將圖片一起保存到里頭。四、測試代碼：!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無標題文檔/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