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

网络编程发布日期：2026/1/17 浏览次数：1

正在浏览：Jquery 焦点图用于图片展示效果代码

效果图如下所示:

演示代码:

<!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>   </head> <body>  <ul id="imageSrc"> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/o_1.gif');"><img src="/UploadFiles/2021-04-02/o_1.gif" alt="Jquery 焦点图 用于图片展示效果代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/o_2.gif');"><img src="/UploadFiles/2021-04-02/o_2.gif" alt="Jquery 焦点图 用于图片展示效果代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/o_3.gif');"><img src="/UploadFiles/2021-04-02/o_3.gif" alt="Jquery 焦点图 用于图片展示效果代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/o_4.gif');"><img src="/UploadFiles/2021-04-02/o_4.gif" alt="Jquery 焦点图 用于图片展示效果代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> <li><a href="javascript:;" onclick="showimg('/UploadFiles/2021-04-02/o_5.gif');"><img src="/UploadFiles/2021-04-02/o_5.gif" alt="Jquery 焦点图 用于图片展示效果代码" onmousewheel="return bbimg(this)" onload="javascript:resizepic(this)" border="0"/></a></li> </ul> <ul id="imageSwitch"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>  </body> </html>

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

上一篇：jquery 轮换显示第一小个例子

下一篇：Jquery实现的table最后一行添加样式的代码

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

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