本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#039; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }
#focus_change_list { position:absolute; width:1800px; height:295px; }
#focus_change_list li { float:left; }
#focus_change_list li img { width:450px; height:295px; }
.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }
#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }
#focus_change_btn ul { padding-left:5px; }
#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }
#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }
#focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}
#focus_change_btn .current img { border-color:#EEE; }
希望本文所述对大家的javascript程序设计有所帮助。
