比较炫的图片播放器 js 焦点效果代码

(编辑：jimmy 日期: 2026/3/9 浏览：3 次 )

<!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=gb2312" /> <title>图片播放器_图片轮换_焦点效果</title> <style type="text/css">     #focus_m{position:relative; width:420px; height:384px; background:#133775}     .f_img_roll{width:350px; height:300px; position:relative;}     .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}     .f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}     .f_img_tree div{position:absolute; z-index:201; top:3px; right:0; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}     .f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}     .f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}     .f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}     .f_con{color:#fff; height:70px;}     .f_con .f_title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}     .f_con .f_title a:link, .f_con .f_title a:visited{color:#fff; text-decoration:none}     .f_con .f_title a:hover{text-decoration:underline}     .f_con .f_con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}   </style>    </head> <body>                      </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：js iframe网站后台左右收缩型页面脚本
下一篇：JavaScript数组问题解决的多种方法