移植性很高的jquery图片轮播插件

1，轮播插件：

本插件可以支持图片和文字，带缩略图，图片大小可以调整，图片数量不限，兼容IE，FF，Chrome等浏览器。

2，效果展示：

3，代码块

html页面需要引入js文件，

<linktype="text/css"rel="stylesheet"href="css/galleryview.css"/><scripttype="text/javascript"src="js/jquery/jquery-1.4.min.js"></script><scripttype="text/javascript"src="js/jquery/jquery.easing.1.3.js"></script><scripttype="text/javascript"src="js/jquery/jquery.galleryview-1.1.js"></script><scripttype="text/javascript"src="js/jquery/jquery.timers-1.1.2.js"></script>

在页面需要调用js，并设置参数：

$('#photos').galleryView({overlay_height:35,//阴影部分高度overlay_font_size:'13px',//阴影部分字体大小pause_on_hover:true,//光标进入之后,停止播放easing:'easeInBack',//frame动画效果panel_width:674,//图片宽度panel_height:252,//图片高度frame_width:100,//缩略图宽度frame_height:37//缩略图高度});

可以设置的参数，参考：jquery.galleryview-1.1.js文件末尾：

$.fn.galleryView.defaults={panel_width:400,panel_height:300,frame_width:80,frame_height:80,filmstrip_size:3,overlay_height:70,overlay_font_size:'1em',transition_speed:400,transition_interval:6000,overlay_opacity:0.6,overlay_color:'black',background_color:'black',overlay_text_color:'white',caption_text_color:'white',border:'1pxsolidblack',nav_theme:'light',easing:'swing',filmstrip_position:'bottom',overlay_position:'bottom',show_captions:false,fade_panels:true,pause_on_hover:false};

但是一般不会用到这么多。

body内的内容，如下：

<divid="photos"class="galleryview"><divclass="panel"><imgsrc="img/01.jpg"/><divclass="panel-overlay"><h3>Effetdusoleilsurlepaysage</h3><p>xxxxxxxxxxxxxxxxxxxxx</p></div></div><divclass="panel"><imgsrc="img/02.jpg"/><divclass="panel-overlay"><h3>Eden</h3><p>xxxxxxxxxxxxxxxxxxxxx.</p></div></div><divclass="panel"><imgsrc="img/03.jpg"/><divclass="panel-overlay"><h3>SnailontheCorn</h3><p>xxxxxxxxxxxxxxxxxxxxxx</p></div></div><divclass="panel"><imgsrc="img/04.jpg"/><divclass="panel-overlay"><h3>Flowers</h3><p>xxxxxxxxxxxxxx</p></div></div><divclass="panel"><imgsrc="img/06.jpg"/><divclass="panel-overlay"><h3>AloneBeach</h3><p>xxxxxxxxxxxx</p></div></div><divclass="panel"><imgsrc="img/05.jpg"/><divclass="panel-overlay"><h3>SunriseTrees</h3><p>Photoby<ahref="http://www.sxc.hu/profile/a_glitch"target="_blank">a_glitch</a>.Viewfull-sizephoto<ahref="http://www.sxc.hu/photo/289581"target="_blank">here</a>.</p></div></div><divclass="panel"><imgsrc="img/07.jpg"/><divclass="panel-overlay"><h3>Waterfall</h3><p>xxxxxxxxx</p></div></div><divclass="panel"><imgsrc="img/08.jpg"/><divclass="panel-overlay"><h3>DeathValley</h3><p>XXX</p></div></div><ulclass="filmstrip"><li><imgsrc="img/frame-01.jpg"/></li><li><imgsrc="img/frame-02.jpg"/></li><li><imgsrc="img/frame-03.jpg"/></li><li><imgsrc="img/frame-04.jpg"/></li><li><imgsrc="img/frame-06.jpg"/></li><li><imgsrc="img/frame-05.jpg"/></li><li><imgsrc="img/frame-07.jpg"/></li><li><imgsrc="img/frame-08.jpg"/></li></ul></div>

========================

以下是动态添加图片的方法：

jsp，动态添加图片可以这样：

<!--图片轮播--><divid="photos"class="galleryview"><divid="p_w_picpathPanel"><!--需要展示的图片--></div><ulclass="filmstrip"><!--需要展示图片的缩略图--></ul></div><!--轮播结束-->

js文件需要使用jquery完成：

$(function(){doPortalImageListQuery();});functiondoPortalImageListQuery(){//UUR.getImagesByStatus是后台路径$.ajax(UUR.getImagesByStatus,{},function(bln,response,o){varobjRet=toJson(response.responseText);varp_w_picpaths=objRet.data;//获得照片列表vardiv_inner='';varli_inner='';if(p_w_picpaths.length!=0){for(vari=0;i<p_w_picpaths.length;i++){div_inner+='<divclass="panel">\<imgsrc="${ctx}/'+p_w_picpaths[i].path+'/'+p_w_picpaths[i].fileName+'"width="674"/>\<divclass="panel-overlay">\<p>'+(p_w_picpaths[i].info!=null?p_w_picpaths[i].info:p_w_picpaths[i].oldName)+'</p>\</div>\</div>\';li_inner+='<li><imgsrc="${ctx}/'+p_w_picpaths[i].path+'/b_'+p_w_picpaths[i].fileName+'"width="100"height="37"/></li>';}}$("#p_w_picpathPanel").append(div_inner);$(".filmstrip").append(li_inner);play();});}//图片轮播代码functionplay(){$('#photos').galleryView({overlay_height:35,//阴影部分高度overlay_font_size:'13px',//阴影部分字体大小pause_on_hover:true,//光标进入之后,停止播放easing:'easeInBack',//frame动画效果panel_width:674,//图片宽度panel_height:252,//图片高度frame_width:100,//缩略图宽度frame_height:37//缩略图高度});}