JS网页图片播放效果之一[底部带缩略图].doc

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