Jquery 焦点图用于图片展示效果代码_软件编程

Jquery 焦点图用于图片展示效果代码

发布时间：2026-01-11

点击量：

效果图如下所示:

演示代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Jquery图片展示焦点图</title> <style type="text/css"> *{ margin:0px; padding:0px; list-style:none; border:0px;} body{ font-size:12px; color:white;} #imageShow{ position:relative; width:586px; height:150px; z-index:1; overflow:hidden;} #imageShow #imageSwitch{ position:absolute; right:0px; bottom:0px; padding-left:50px; z-index:2; background-color:#C08A93; filter: Alpha(opacity=70); opacity:0.7;} #imageShow #imageSwitch li{ float:left; border-left:1px solid white; width:30px; height:14px; line-height:14px; text-align:center;} </style>   <script type="text/javascript" src="/public/static/common/js/ey_global.js?v=v1.7.1"></script>
</head> <body>  <ul id="imageSrc"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul id="imageSwitch"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>  <script type="text/javascript">var root_dir="";var ey_aid=475533;</script>
<script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script>
</body> </html>

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

上一篇：基于jQuery的固定表格头部的代码(IE6,7,8测试通过

下一篇：document.getElementById方法在Fire

Jquery 焦点图 用于图片展示效果代码

发布时间：2026-01-11

点击量：

返回

4008888355

Jquery 焦点图用于图片展示效果代码