【精选】多种样式的图片切换方式.pdfVIP

效果如图所示： 设计思路： 1、设计好图片轮播HTML 代码，以及CSS定位，CSS中着重 运用好position属性，relative和absolute； CSS代码如下： styletype=text/css *{margin:0;padding:0;} ul{list-style-type:none;} body{ color:#333333; font:12px/1.6em Arial, Helvetica, sans-serif;} #picfocus{width:345px; height:235px; border:1px solid #ccc; margin:5px;} #piclist{position: relative; float:left; width:240px; height:225px; overflow:hidden;margin:5px0px0px9px;display:inline;} #pic{position:absolute;} #picli{overflow:hidden;width:240px;height:225px;} #picimg{ width:240px;height:225px;} #pictxtbg{position:absolute; bottom:0px; left:0px; background: none repeat scroll 0 0 #000000; opacity:0.5; width:240px; height:35px;filter:alpha(opacity=50);} #pictxt{position:absolute;bottom:8px;left:8px;color:#fff;} #pictxt.normal{display:none;} #pictxt.current{display:block;} #pic{overflow:hidden;} #picbtn{float:right;display:inline;margin:2px9px0px0px;} #picbtn li{ cursor:pointer; height:57px; opacity:0.5; filter:alpha(opacity=50);} #picbtnimg{width:75px;height:45px;margin:7px0px0px11px;} #picbtn.current{opacity:1;filter:alpha(opacity=100);} /style 2、JS代码设计思路： （1）当鼠标移动到小图片按钮上时，促发onmouseover函数， 调整大图片显示的当前位置，显示当前对应的大图片，以及改 变当前显示的小图片按钮及图片标题样式。 （2）编写移动相应的大图片到当前位置的函数， movePic(pic,final_x,final_y,interval)； 编写初始化小图片按钮的样式及标题样式， classNormal(picbtn,pictxt) 编 写 显 示 当 前 图 片 的 样 式 及 标 题 样 式 ， classCurrent(picbtn,pictxt,n) （3）当鼠标移动到小图片按钮时，调用以上三个函数。 （4）自动切换图片，编写函数 autoChange()，利用 setInterval(autoChange(),interval)函数自动切换图片。 相关HTML及JS代码如下： body scripttype=text/javascript //加载window.onload functionaddEventLoad(func){ varoldonload=window.onload; if(typeof(window.onload)!=funciton){ window.onload=func; } else{ window.onload=function(){ oldonload(); func(); } } } //初始化小图片及图片标题样式 functionclassNormal(picbtn,pictxt){ var