jQuery实现点击小图显示大图代码分享

本文实例讲述了jQuery实现点击小图显示大图效果。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的点击小图查看大图的代码，适合用于产品展示等环节，便于用户浏览产品细节，是一款非常实用的特效代码。
运行效果图： ----------------------查看效果-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery实现点击小图显示大图效果代码如下

<head><title>jQuery实现点击小图显示大图效果</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script> <script type="text/javascript" src="js/pngobject.js"></script> <link rel="stylesheet" href="style/style.css" type="text/css" /> <link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css" /> <script type="text/javascript"> $（document）.ready（function（） {/**Examples - images*/$（"a#example1"）.fancybox（{"titleShow" : false}）;$（"a#example2"）.fancybox（{"titleShow" : false,"transitionIn" : "elastic","transitionOut" : "elastic"}）;$（"a#example3"）.fancybox（{"titleShow" : false,"transitionIn" : "none","transitionOut" : "none"}）;$（"a#example4"）.fancybox（）;$（"a#example5"）.fancybox（{"titlePosition" : "inside"}）;$（"a#example6"）.fancybox（{"titlePosition" : "over"}）;$（"a[rel=example_group]"）.fancybox（{"transitionIn" : "none","transitionOut" : "none","titlePosition" : "over","titleFormat" : function（title, currentArray, currentIndex, currentOpts） { return "<span id="fancybox-title-over">Image " + （currentIndex + 1） + " / " + currentArray.length + （title.length ? "   " + title : ""） + "</span>";}}）;/**Examples - various*/$（"#various1"）.fancybox（{"titlePosition" : "inside","transitionIn" : "none","transitionOut" : "none"}）;$（"#various2"）.fancybox（）;$（"#various3"）.fancybox（{"width": "75%","height": "75%","autoScale": false,"transitionIn" : "none","transitionOut" : "none","type": "iframe"}）;$（"#various4"）.fancybox（{"padding": 0,"autoScale": false,"transitionIn" : "none","transitionOut" : "none"}）; }）; </script></head><body><div id="content"> <h4>jQuery 实现点击小图显示大图</h4> <p> <a rel="example_group" href="example/11.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="example/1.jpg" /></a> <a rel="example_group" href="example/22.jpg" title=""><img alt="" src="example/2.jpg" /></a> <a rel="example_group" href="example/44.jpg" title=""><img alt="" src="example/4.jpg" /></a> </p> <p> <a rel="example_group" href="example/33.jpg" title=""><img alt="" src="example/3.jpg" /></a> <a rel="example_group" href="example/8_b.jpg" title=""><img alt="" src="example/8_s.jpg" /></a> <a rel="example_group" href="example/9_b.jpg" title=""><img alt="" src="example/9_s.jpg" /></a> </p></div><div><p> </p></div></body></html>

以上就是为大家分享的jQuery实现点击小图显示大图效果代码，希望大家可以喜欢。