仿土豆网的焦点轮换图片

最新推荐文章于 2025-08-05 09:43:25 发布

原创最新推荐文章于 2025-08-05 09:43:25 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #list #border #float #filter #xhtml

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种模仿土豆网站的焦点图片轮播效果实现方案。该方案使用鼠标悬停切换图片，并通过定时器自动播放，同时具备浏览器兼容性，支持IE6/7、Firefox 2.0/3.0及Opera 9.5等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载的仿土豆网的焦点轮换图片：

1.对焦点图片下方进行透明处理
2.通过鼠标移动到不同的四小图片时,通过改变图片所处父节点id=focus_change_list的left值取得效果
3.默认下每5秒执行一次函数autoFocusChange(),来实现图片自动变换效果
4.当鼠标移到图片上时停止滚动
5.此效果兼容浏览器ie6、ie7、FF2.0、F3.0、opera9.5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿土豆网的焦点轮换图片</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* Reset style */ * { 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 style */ #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; }</style> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="focus_change"> <div id="focus_change_list" style="top:0; left:0;"> <ul> <li><img src="/uploadfile/200901/1/74164133287.jpg" mce_src="uploadfile/200901/1/74164133287.jpg" alt="" /></li> <li><img src="/uploadfile/200901/1/B3164134719.jpg" mce_src="uploadfile/200901/1/B3164134719.jpg" alt="" /></li> <li><img src="/uploadfile/200901/1/AC164135752.jpg" mce_src="uploadfile/200901/1/AC164135752.jpg" alt="" /></li> <li><img src="/uploadfile/200901/1/73164136986.jpg" mce_src="uploadfile/200901/1/73164136986.jpg" alt="" /></li> </ul> </div> <div class="focus_change_opacity"></div> <div id="focus_change_btn"> <ul> <li class="current"><a href="#" mce_href="#"><img src="/uploadfile/200901/1/5F164137217.jpg" mce_src="uploadfile/200901/1/5F164137217.jpg" alt="" /></a></li> <li><a href="#" mce_href="#"><img src="/uploadfile/200901/1/A4164137404.jpg" mce_src="uploadfile/200901/1/A4164137404.jpg" alt="" /></a></li> <li><a href="#" mce_href="#"><img src="/uploadfile/200901/1/2D164141182.jpg" mce_src="uploadfile/200901/1/2D164141182.jpg" alt="" /></a></li> <li><a href="#" mce_href="#"><img src="/uploadfile/200901/1/48164141437.jpg" mce_src="uploadfile/200901/1/48164141437.jpg" alt="" /></a></li> </ul> </div> </div> <div style="height:20px; background:#EEE;"></div> </body> </html>