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

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

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

标题查询实现点击小图显示大图效果/title脚本类型=' text/JavaScript ' src=' http :3358代码。jquery。com/jquery-1。4 .2 .量滴js /脚本类型=' text/JAVAScript ' src=' http : js/jquery。鼠标滚轮-3。0 .2 .打包。js /脚本类型=' text/JAVAScript ' src=' http 3360 js/jquery。花式方块-1 ready(function(){/* * Examples-images */$(' a # example 1 ').花式框({ ' title SHow ' : false })；$('a#example2 ').花式方块({ ' title show ' : false，' transitionIn' : 'elastic '，' transitionOut ' : ' elastic ' })；$('a#example3 ').花式方块({ ' title show ' : false，' transitionIn' : 'none '，' transitionOut ' : ' none ' })；$('a#example4 ').花式盒子()；$('a#example5 ').花式框({ ' title position ' : ' inside ' })；$('a#example6 ').花式框({ ' title position ' : ' over ' })；$('a[rel=example_group]').花式方块({ ' transitionIn ' : ' none '，' transitionOut' : 'none '，' titlePosition' : 'over '，' titleFormat' :函数(title，CurrentRay，currentIndex，current topts){ return ' span id='花式方块-title-over ' image '(当前索引1)'/'当前层。长度(标题长度？title : ' ')'/span '；} });/* *示例-各种*/$('#various1 ').花式框({ ' title position ' : ' in '，' transitionIn' : 'none '，' transitionOut ' : ' none ' })；$('#various2 ').花式盒子()；$('#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 dydiv id=' content ' H4jquery实现点击小图显示大图/H4 p a rel=' example _ group ' href=' example/11。jpg ' title=' Lorem ipsum dolor sit amet ' img alt=' src=' http : example/1。jpg '/a rel=' example _ group ' href=' example/22。jpg ' title=' img alt=' src=' http :示例/2。jpg '/a rel=' example _ group ' href=' example/44。jpg .以上就是为大家分享的jQuery实现点击小图显示大图效果代码，希望大家可以喜欢。