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

JS网页图片播放效果之一[底部带缩略图] 昨天逛凤凰网看到视频主页上的图片播放效果挺好，模仿（仅样子）了下来，很久没有折腾这些，当作练习吧，与大家分享。一、效果图：二、背景图片下载：? ??? ??保存为scrollpicbg.png?三、测试要求：? ? 1.将下面的代码保存为XXX.html文件。? ? 2.下载上面的背景图，另外再弄7张图分名为1.jpg、2.jpg……7.jpg，新建一个文件夹：images，将图片一起保存到里头。四、测试代码： 〈!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd〉〈html xmlns=/1999/xhtml〉〈head〉〈meta http-equiv=Content-Type content=text/html; charset=utf-8 /〉〈title〉无标题文档〈/title〉〈style 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:hover{height: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:hover{height: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