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

JS网页图片播放效果之一[底部带缩略图]
昨天逛凤凰网看到视频主页上的图片播放效果挺好,模仿(仅样子)了下来,很久没有折腾这些,当作练习吧,与大家分享。
一、效果图:
二、背景图片下载:
    
    
 
三、测试要求:
    。
    ,、……,新建一个文件夹:images,将图片一起保存到里头。
四、测试代码:
〈!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"〉
〈html xmlns="9/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:;  -khtml-opacity: ;  opacity: ;}
.scrollPicBox .movPic     {position:absolute; height:70px; margin-top:305px; width:700px; z-index:301;}
.scrollPicBox  #showpic   {height:375px; width:700px; background-color:#000}
.scrollPicBox       {height:70px; width:35px; float:left; display:block; background:url(images/) no-repeat 5px 5px;}
.scrollPicBox :hover{height:70px; width:35px; float:left; display:block; background:url(images/) no-repeat -49px 5px;}
.scrollPicBox       {height:70px; width:35px; float:right; display:block;background:url(images/) no-repeat -22px 5px;}
.scroll