prettyPhoto图片滚动展示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 prettyPhoto图片滚动展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type" />
<title>prettyPhoto图片滚动展示</title>
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
<link type="text/css" href="css/prettyPhoto.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<style type="text/css">
body,td,th {
	font-family: "Microsoft YaHei", Arial;
}
</style>
</head>
<body>
<!-- 代码开始 -->
<div class="infopic">
	<div class="picbox">
		<ul class="gallery piclist">
			<li><a href="images/pic_1.jpg" rel="prettyPhoto[]"><img src="images/pic_1.jpg" /></a></li>
			<li><a href="images/pic_2.jpg" rel="prettyPhoto[]"><img src="images/pic_2.jpg" /></a></li>
			<li><a href="images/pic_3.jpg" rel="prettyPhoto[]"><img src="images/pic_3.jpg" /></a></li>
			<li><a href="images/pic_4.png" rel="prettyPhoto[]"><img src="images/pic_4.png" /></a></li>
			<li><a href="images/pic_5.jpg" rel="prettyPhoto[]"><img src="images/pic_5.jpg" /></a></li>
			<li><a href="images/pic_6.png" rel="prettyPhoto[]"><img src="images/pic_6.png" /></a></li>
			<li><a href="images/pic_7.jpg" rel="prettyPhoto[]"><img src="images/pic_7.jpg" /></a></li>
			<li><a href="images/pic_8.jpg" rel="prettyPhoto[]"><img src="images/pic_8.jpg" /></a></li>
			<li><a href="images/pic_9.jpg" rel="prettyPhoto[]"><img src="images/pic_9.jpg" /></a></li>
		</ul>
	</div>
	<div class="pic_prev"></div>
	<div class="pic_next"></div>
</div>				

<script type="text/javascript">
$(document).ready(function(){	
	$("area[rel^='prettyPhoto']").prettyPhoto();
	$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
})
</script>
</body>
</html>

JS代码(jquery.prettyphoto.js):

/* ------------------------------------------------------------------------Class:prettyPhotoUse:Lightbox clone for jQueryAuthor:Stephane Caron (http://www.no-margin-for-errors.com)Version:3.1.5------------------------------------------------------------------------- */
(function(e){
	function t(){
	var e=location.href;
	hashtag=e.indexOf("#prettyPhoto")!==-1?decodeURI(e.substring(e.indexOf("#prettyPhoto")+1,e.length)):false;
	return hashtag}
function n(){
	if(typeof theRel=="undefined")return;
	location.hash=theRel+"/"+rel_index+"/"}
function r(){
	if(location.href.indexOf("#prettyPhoto")!==-1)location.hash="prettyPhoto"}
function i(e,t){
	e=e.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
	var n="[\\?&]"+e+"=([^&#]*)";
	var r=new RegExp(n);
	var i=r.exec(t);
	return i==null?"":i[1]}
e.prettyPhoto={
	version:"3.1.5"}
;
	e.fn.prettyPhoto=function(s){
	function g(){
	e(".pp_loaderIcon").hide();
	projectedTop=scroll_pos["scrollTop"]+(d/2-a["containerHeight"]/2);
	if(projectedTop<0)projectedTop=0;
	$ppt.fadeTo(settings.animation_speed,1);
	$pp_pic_holder.find(".pp_content").animate({
	height:a["contentHeight"],width:a["contentWidth"]}
,settings.animation_speed);
	$pp_pic_holder.animate({
	top:projectedTop,left:v/2-a["containerWidth"]/2<0?0:v/2-a["containerWidth"]/2,width:a["containerWidth"]}
,settings.animation_speed,function(){
	$pp_pic_holder.find(".pp_hoverContainer,#fullResImage").height(a["height"]).width(a["width"]);
	$pp_pic_holder.find(".pp_fade").fadeIn(settings.animation_speed);
	if(isSet&&S(pp_images[set_position])=="image"){
	$pp_pic_holder.find(".pp_hoverContainer").show()}
else{
	$pp_pic_holder.find(".pp_hoverContainer").hide()}
if(settings.allow_expand){
	if(a["resized"]){
	e("a.pp_expand,a.pp_contract").show()}
else{
	e("a.pp_expand").hide()}
}
if(settings.autoplay_slideshow&&!m&&!f)e.prettyPhoto.startSlideshow();
	settings.changepicturecallback();
	f=true}
);
	C();
	s.ajaxcallback()}
function y(t){
	$pp_pic_holder.find("#pp_full_res object,#pp_full_res embed").css("visibility","hidden");
	$pp_pic_holder.find(".pp_fade").fadeOut(settings.animation_speed,function(){
	e(".pp_loaderIcon").show();
	t()}
)}
function b(t){
	t>1?e(".pp_nav").show():e(".pp_nav").hide()}
function w(e,t){
	resized=false;
	E(e,t);
	imageWidth=e,imageHeight=t;
	if((p>v||h>d)&&doresize&&settings.allow_resize&&!u){
	resized=true,fitting=false;
	while(!fitting){
	if(p>v){
	imageWidth=v-200;
	imageHeight=t/e*imageWidth}
else if(h>d){
	imageHeight=d-200;
	imageWidth=e/t*imageHeight}
else{
	fitting=true}
h=imageHeight,p=imageWidth}
if(p>v||h>d){
	w(p,h)}
E(imageWidth,imageHeight)}
return{
	width:Math.floor(imageWidth),height:Math.floor(imageHeight),containerHeight:Math.floor(h),containerWidth:Math.floor(p)+settings.horizontal_padding*2,contentHeight:Math.floor(l),contentWidth:Math.floor(c),resized:resized}
}
function E(t,n){
	t=parseFloat(t);
	n=parseFloat(n);
	$pp_details=$pp_pic_holder.find(".pp_details");
	$pp_details.width(t);
	detailsHeight=parseFloat($pp_details.css("marginTop"))+parseFloat($pp_details.css("marginBottom"));
	$pp_details=$pp_details.clone().addClass(settings.theme).width(t).appendTo(e("body")).css({
	position:"absolute",top:-1e4}
);
	detailsHeight+=$pp_details.height();
	detailsHeight=detailsHeight<=34?36:detailsHeight;
	$pp_details.remove();
	$pp_title=$pp_pic_holder.find(".ppt");
	$pp_title.width(t);
	titleHeight=parseFloat($pp_title.css("marginTop"))+parseFloat($pp_title.css("marginBottom"));
	$pp_title=$pp_title.clone().appendTo(e("body")).css({
	position:"absolute",top:-1e4}
);
	titleHeight+=$pp_title.height();
	$pp_title.remove();
	l=n+detailsHeight;
	c=t;
	h=l+titleHeight+$pp_pic_holder.find(".pp_top").height()+$pp_pic_holder.find(".pp_bottom").height();
	p=t}
function S(e){
	if(e.match(/youtube\.com\/watch/i)||e.match(/youtu\.be/i)){
	return"youtube"}
else if(e.match(/vimeo\.com/i)){
	return"vimeo"}
else if(e.match(/\b.mov\b/i)){
	return"quicktime"}
else if(e.match(/\b.swf\b/i)){
	return"flash"}
else if(e.match(/\biframe=true\b/i)){
	return"iframe"}
else if(e.match(/\bajax=true\b/i)){
	return"ajax"}
else if(e.match(/\bcustom=true\b/i)){
	return"custom"}
else if(e.substr(0,1)=="#"){
	return"inline"}
else{
	return"image"}
}
function x(){
	if(doresize&&typeof $pp_pic_holder!="undefined"){
	scroll_pos=T();
	contentHeight=$pp_pic_holder.height(),contentwidth=$pp_pic_holder.width();
	projectedTop=d/2+scroll_pos["scrollTop"]-contentHeight/2;
	if(projectedTop<0)projectedTop=0;
	if(contentHeight>d)return;
	$pp_pic_holder.css({
	top:projectedTop,left:v/2+scroll_pos["scrollLeft"]-contentwidth/2}
)}
}
function T(){
	if(self.pageYOffset){
	return{
	scrollTop:self.pageYOffset,scrollLeft:self.pageXOffset}
}
else if(document.documentElement&&document.documentElement.scrollTop){
	return{
	scrollTop:document.documentElement.scrollTop,scrollLeft:document.documentElement.scrollLeft}
}
else if(document.body){
	return{
	scrollTop:document.body.scrollTop,scrollLeft:document.body.scrollLeft}
}
}
function N(){
	d=e(window).height(),v=e(window).width();
	if(typeof $pp_overlay!="undefined")$pp_overlay.height(e(document).height()).width(v)}
function C(){
	if(isSet&&settings.overlay_gallery&&S(pp_images[set_position])=="image"){
	itemWidth=52+5;
	navWidth=settings.theme=="facebook"||settings.theme=="pp_default"?50:30;
	itemsPerPage=Math.floor((a["containerWidth"]-100-navWidth)/itemWidth);
	itemsPerPage=itemsPerPage<pp_images.length?itemsPerPage:pp_images.length;
	totalPage=Math.ceil(pp_images.length/itemsPerPage)-1;
	if(totalPage==0){
	navWidth=0;
	$pp_gallery.find(".pp_arrow_next,.pp_arrow_previous").hide()}
else{
	$pp_gallery.find(".pp_arrow_next,.pp_arrow_previous").show()}
galleryWidth=itemsPerPage*itemWidth;
	fullGalleryWidth=pp_images.length*itemWidth;
	$pp_gallery.css("margin-left",-(galleryWidth/2+navWidth/2)).find("div:first").width(galleryWidth+5).find("ul").width(fullGalleryWidth).find("li.selected").removeClass("selected");
	goToPage=Math.floor(set_position/itemsPerPage)<totalPage?Math.floor(set_position/itemsPerPage):totalPage;
	e.prettyPhoto.changeGalleryPage(goToPage);
	$pp_gallery_li.filter(":eq("+set_position+")").addClass("selected")}
else{
	$pp_pic_holder.find(".pp_content").unbind("mouseenter mouseleave")}
}
function k(t){
	if(settings.social_tools)facebook_like_link=settings.social_tools.replace("{
	location_href}
",encodeURIComponent(location.href));
	settings.markup=settings.markup.replace("{
	pp_social}
","");
	e("body").append(settings.markup);
	$pp_pic_holder=e(".pp_pic_holder"),$ppt=e(".ppt"),$pp_overlay=e("div.pp_overlay");
	if(isSet&&settings.overlay_gallery){
	currentGalleryPage=0;
	toInject="";
	for(var n=0;
	n<pp_images.length;
	n++){
	if(!pp_images[n].match(/\b(jpg|jpeg|png|gif)\b/gi)){
	classname="default";
	img_src=""}
else{
	classname="";
	img_src=pp_images[n]}
toInject+="<li class='"+classname+"'><a href='#'><img src='"+img_src+"' width='50' alt='' /></a></li>"}
toInject=settings.gallery_markup.replace(/{
	gallery}
/g,toInject);
	$pp_pic_holder.find("#pp_full_res").after(toInject);
	$pp_gallery=e(".pp_pic_holder .pp_gallery"),$pp_gallery_li=$pp_gallery.find("li");
	$pp_gallery.find(".pp_arrow_next").click(function(){
	e.prettyPhoto.changeGalleryPage("next");
	e.prettyPhoto.stopSlideshow();
	return false}
);
	$pp_gallery.find(".pp_arrow_previous").click(function(){
	e.prettyPhoto.changeGalleryPage("previous");
	e.prettyPhoto.stopSlideshow();
	return false}
);
	$pp_pic_holder.find(".pp_content").hover(function(){
	$pp_pic_holder.find(".pp_gallery:not(.disabled)").fadeIn()}
,function(){
	$pp_pic_holder.find(".pp_gallery:not(.disabled)").fadeOut()}
);
	itemWidth=52+5;
	$pp_gallery_li.each(function(t){
	e(this).find("a").click(function(){
	e.prettyPhoto.changePage(t);
	e.prettyPhoto.stopSlideshow();
	return false}
)}
)}
if(settings.slideshow){
	$pp_pic_holder.find(".pp_nav").prepend('<a href="#" class="pp_play">Play</a>');
	$pp_pic_holder.find(".pp_nav .pp_play").click(function(){
	e.prettyPhoto.startSlideshow();
	return false}
)}
$pp_pic_holder.attr("class","pp_pic_holder "+settings.theme);
	$pp_overlay.css({
	opacity:0,height:e(document).height(),width:e(window).width()}
).bind("click",function(){
	if(!settings.modal)e.prettyPhoto.close()}
);
	e("a.pp_close").bind("click",function(){
	e.prettyPhoto.close();
	return false}
);
	if(settings.allow_expand){
	e("a.pp_expand").bind("click",function(t){
	if(e(this).hasClass("pp_expand")){
	e(this).removeClass("pp_expand").addClass("pp_contract");
	doresize=false}
else{
	e(this).removeClass("pp_contract").addClass("pp_expand");
	doresize=true}
y(function(){
	e.prettyPhoto.open()}
);
	return false}
)}
$pp_pic_holder.find(".pp_previous,.pp_nav .pp_arrow_previous").bind("click",function(){
	e.prettyPhoto.changePage("previous");
	e.prettyPhoto.stopSlideshow();
	return false}
);
	$pp_pic_holder.find(".pp_next,.pp_nav .pp_arrow_next").bind("click",function(){
	e.prettyPhoto.changePage("next");
	e.prettyPhoto.stopSlideshow();
	return false}
);
	x()}
s=jQuery.extend({
	hook:"rel",animation_speed:"fast",ajaxcallback:function(){
}
,slideshow:5e3,autoplay_slideshow:false,opacity:.8,show_title:true,allow_resize:true,allow_expand:true,default_width:500,default_height:344,counter_separator_label:"/",theme:"pp_default",horizontal_padding:20,hideflash:false,wmode:"opaque",autoplay:true,modal:false,deeplinking:true,overlay_gallery:true,overlay_gallery_max:30,keyboard_shortcuts:true,changepicturecallback:function(){
}
,callback:function(){
}
,ie6_fallback:true,markup:'<div class="pp_pic_holder"><div class="ppt"> </div><div class="pp_top"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div><div class="pp_content_container"><div class="pp_left"><div class="pp_right"><div class="pp_content"><div class="pp_loaderIcon"></div><div class="pp_fade"><a href="#" class="pp_expand" title="Expand the image">Expand</a><div class="pp_hoverContainer"><a class="pp_next" href="#">next</a><a class="pp_previous" href="#">previous</a></div><div id="pp_full_res"></div><div class="pp_details"><div class="pp_nav"><a href="#" class="pp_arrow_previous">Previous</a><p class="currentTextHolder">0/0</p><a href="#" class="pp_arrow_next">Next</a></div><p class="pp_description"></p><div class="pp_social" style="display:none;
	">{
	pp_social}
</div><a class="pp_close" href="#">Close</a></div></div></div></div></div></div><div class="pp_bottom"><div class="pp_left"></div><div class="pp_middle"></div><div class="pp_right"></div></div></div><div class="pp_overlay"></div>',gallery_markup:'<div class="pp_gallery"><a href="#" class="pp_arrow_previous">Previous</a><div><ul>{
	gallery}
</ul></div><a href="#" class="pp_arrow_next">Next</a></div>',image_markup:'<img id="fullResImage" src="{
	path}
" />',flash_markup:'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{
	width}
" height="{
	height}
"><param name="wmode" value="{
	wmode}
" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{
	path}
" /><embed src="{
	path}
" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{
	width}
" height="{
	height}
" wmode="{
	wmode}
"></embed></object>',quicktime_markup:'<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{
	height}
" width="{
	width}
"><param name="src" value="{
	path}
"><param name="autoplay" value="{
	autoplay}
"><param name="type" value="video/quicktime"><embed src="{
	path}
" height="{
	height}
" width="{
	width}
" autoplay="{
	autoplay}
" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',iframe_markup:'<iframe src ="{
	path}
" width="{
	width}
" height="{
	height}
" frameborder="no"></iframe>',inline_markup:'<div class="pp_inline">{
	content}
</div>',custom_markup:"",social_tools:'<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={
	location_href}
&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none;
	overflow:hidden;
	width:500px;
	height:23px;
	" allowTransparency="true"></iframe></div>'}
,s);
	var o=this,u=false,a,f,l,c,h,p,d=e(window).height(),v=e(window).width(),m;
	doresize=true,scroll_pos=T();
	e(window).unbind("resize.prettyphoto").bind("resize.prettyphoto",function(){
	x();
	N()}
);
	if(s.keyboard_shortcuts){
	e(document).unbind("keydown.prettyphoto").bind("keydown.prettyphoto",function(t){
	if(typeof $pp_pic_holder!="undefined"){
	if($pp_pic_holder.is(":visible")){
	switch(t.keyCode){
	case 37:e.prettyPhoto.changePage("previous");
	t.preventDefault();
	break;
	case 39:e.prettyPhoto.changePage("next");
	t.preventDefault();
	break;
	case 27:if(!settings.modal)e.prettyPhoto.close();
	t.preventDefault();
	break}
}
}
}
)}
e.prettyPhoto.initialize=function(){
	settings=s;
	if(settings.theme=="pp_default")settings.horizontal_padding=16;
	theRel=e(this).attr(settings.hook);
	galleryRegExp=/\[(?:.*)\]/;
	isSet=galleryRegExp.exec(theRel)?true:false;
	pp_images=isSet?jQuery.map(o,function(t,n){
	if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("href")}
):e.makeArray(e(this).attr("href"));
	pp_titles=isSet?jQuery.map(o,function(t,n){
	if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).find("img").attr("alt")?e(t).find("img").attr("alt"):""}
):e.makeArray(e(this).find("img").attr("alt"));
	pp_descriptions=isSet?jQuery.map(o,function(t,n){
	if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("title")?e(t).attr("title"):""}
):e.makeArray(e(this).attr("title"));
	if(pp_images.length>settings.overlay_gallery_max)settings.overlay_gallery=false;
	set_position=jQuery.inArray(e(this).attr("href"),pp_images);
	rel_index=isSet?set_position:e("a["+settings.hook+"^='"+theRel+"']").index(e(this));
	k(this);
	if(settings.allow_resize)e(window).bind("scroll.prettyphoto",function(){
	x()}
);
	e.prettyPhoto.open();
	return false}
;
	e.prettyPhoto.open=function(t){
	if(typeof settings=="undefined"){
	settings=s;
	pp_images=e.makeArray(arguments[0]);
	pp_titles=arguments[1]?e.makeArray(arguments[1]):e.makeArray("");
	pp_descriptions=arguments[2]?e.makeArray(arguments[2]):e.makeArray("");
	isSet=pp_images.length>1?true:false;
	set_position=arguments[3]?arguments[3]:0;
	k(t.target)}
if(settings.hideflash)e("object,embed,iframe[src*=youtube],iframe[src*=vimeo]").css("visibility","hidden");
	b(e(pp_images).size());
	e(".pp_loaderIcon").show();
	if(settings.deeplinking)n();
	if(settings.social_tools){
	facebook_like_link=settings.social_tools.replace("{
	location_href}
",encodeURIComponent(location.href));
	$pp_pic_holder.find(".pp_social").html(facebook_like_link)}
if($ppt.is(":hidden"))$ppt.css("opacity",0).show();
	$pp_overlay.show().fadeTo(settings.animation_speed,settings.opacity);
	$pp_pic_holder.find(".currentTextHolder").text(set_position+1+settings.counter_separator_label+e(pp_images).size());
	if(typeof pp_descriptions[set_position]!="undefined"&&pp_descriptions[set_position]!=""){
	$pp_pic_holder.find(".pp_description").show().html(unescape(pp_descriptions[set_position]))}
else{
	$pp_pic_holder.find(".pp_description").hide()}
movie_width=parseFloat(i("width",pp_images[set_position]))?i("width",pp_images[set_position]):settings.default_width.toString();
	movie_height=parseFloat(i("height",pp_images[set_position]))?i("height",pp_images[set_position]):settings.default_height.toString();
	u=false;
	if(movie_height.indexOf("%")!=-1){
	movie_height=parseFloat(e(window).height()*parseFloat(movie_height)/100-150);
	u=true}
if(movie_width.indexOf("%")!=-1){
	movie_width=parseFloat(e(window).width()*parseFloat(movie_width)/100-150);
	u=true}
$pp_pic_holder.fadeIn(function(){
	settings.show_title&&pp_titles[set_position]!=""&&typeof pp_titles[set_position]!="undefined"?alert(unescape(pp_titles[set_position])):$ppt.html("");
	imgPreloader="";
	skipInjection=false;
	switch(S(pp_images[set_position])){
	case"image":imgPreloader=new Image;
	nextImage=new Image;
	if(isSet&&set_position<e(pp_images).size()-1)nextImage.src=pp_images[set_position+1];
	prevImage=new Image;
	if(isSet&&pp_images[set_position-1])prevImage.src=pp_images[set_position-1];
	$pp_pic_holder.find("#pp_full_res")[0].innerHTML=settings.image_markup.replace(/{
	path}
/g,pp_images[set_position]);
	imgPreloader.onload=function(){
	a=w(imgPreloader.width,imgPreloader.height);
	g()}
;
	imgPreloader.onerror=function(){
	alert("Image cannot be loaded. Make sure the path is correct and image exist.");
	e.prettyPhoto.close()}
;
	imgPreloader.src=pp_images[set_position];
	break;
	case"youtube":a=w(movie_width,movie_height);
	movie_id=i("v",pp_images[set_position]);
	if(movie_id==""){
	movie_id=pp_images[set_position].split("youtu.be/");
	movie_id=movie_id[1];
	if(movie_id.indexOf("?")>0)movie_id=movie_id.substr(0,movie_id.indexOf("?"));
	if(movie_id.indexOf("&")>0)movie_id=movie_id.substr(0,movie_id.indexOf("&"))}
movie="http://www.youtube.com/embed/"+movie_id;
	i("rel",pp_images[set_position])?movie+="?rel="+i("rel",pp_images[set_position]):movie+="?rel=1";
	if(settings.autoplay)movie+="&autoplay=1";
	toInject=settings.iframe_markup.replace(/{
	width}
/g,a["width"]).replace(/{
	height}
/g,a["height"]).replace(/{
	wmode}
/g,settings.wmode).replace(/{
	path}
/g,movie);
	break;
	case"vimeo":a=w(movie_width,movie_height);
	movie_id=pp_images[set_position];
	var t=/http(s?):\/\/(www\.)?vimeo.com\/(\d+)/;
	var n=movie_id.match(t);
	movie="http://player.vimeo.com/video/"+n[3]+"?title=0&byline=0&portrait=0";
	if(settings.autoplay)movie+="&autoplay=1;
	";
	vimeo_width=a["width"]+"/embed/?moog_width="+a["width"];
	toInject=settings.iframe_markup.replace(/{
	width}
/g,vimeo_width).replace(/{
	height}
/g,a["height"]).replace(/{
	path}
/g,movie);
	break;
	case"quicktime":a=w(movie_width,movie_height);
	a["height"]+=15;
	a["contentHeight"]+=15;
	a["containerHeight"]+=15;
	toInject=settings.quicktime_markup.replace(/{
	width}
/g,a["width"]).replace(/{
	height}
/g,a["height"]).replace(/{
	wmode}
/g,settings.wmode).replace(/{
	path}
/g,pp_images[set_position]).replace(/{
	autoplay}
/g,settings.autoplay);
	break;
	case"flash":a=w(movie_width,movie_height);
	flash_vars=pp_images[set_position];
	flash_vars=flash_vars.substring(pp_images[set_position].indexOf("flashvars")+10,pp_images[set_position].length);
	filename=pp_images[set_position];
	filename=filename.substring(0,filename.indexOf("?"));
	toInject=settings.flash_markup.replace(/{
	width}
/g,a["width"]).replace(/{
	height}
/g,a["height"]).replace(/{
	wmode}
/g,settings.wmode).replace(/{
	path}
/g,filename+"?"+flash_vars);
	break;
	case"iframe":a=w(movie_width,movie_height);
	frame_url=pp_images[set_position];
	frame_url=frame_url.substr(0,frame_url.indexOf("iframe")-1);
	toInject=settings.iframe_markup.replace(/{
	width}
/g,a["width"]).replace(/{
	height}
/g,a["height"]).replace(/{
	path}
/g,frame_url);
	break;
	case"ajax":doresize=false;
	a=w(movie_width,movie_height);
	doresize=true;
	skipInjection=true;
	e.get(pp_images[set_position],function(e){
	toInject=settings.inline_markup.replace(/{
	content}
/g,e);
	$pp_pic_holder.find("#pp_full_res")[0].innerHTML=toInject;
	g()}
);
	break;
	case"custom":a=w(movie_width,movie_height);
	toInject=settings.custom_markup;
	break;
	case"inline":myClone=e(pp_images[set_position]).clone().append('<br clear="all" />').css({
	width:settings.default_width}
).wrapInner('<div id="pp_full_res"><div class="pp_inline"></div></div>').appendTo(e("body")).show();
	doresize=false;
	a=w(e(myClone).width(),e(myClone).height());
	doresize=true;
	e(myClone).remove();
	toInject=settings.inline_markup.replace(/{
	content}
/g,e(pp_images[set_position]).html());
	break}
if(!imgPreloader&&!skipInjection){
	$pp_pic_holder.find("#pp_full_res")[0].innerHTML=toInject;
	g()}
}
);
	return false}
;
	e.prettyPhoto.changePage=function(t){
	currentGalleryPage=0;
	if(t=="previous"){
	set_position--;
	if(set_position<0)set_position=e(pp_images).size()-1}
else if(t=="next"){
	set_position++;
	if(set_position>e(pp_images).size()-1)set_position=0}
else{
	set_position=t}
rel_index=set_position;
	if(!doresize)doresize=true;
	if(settings.allow_expand){
	e(".pp_contract").removeClass("pp_contract").addClass("pp_expand")}
y(function(){
	e.prettyPhoto.open()}
)}
;
	e.prettyPhoto.changeGalleryPage=function(e){
	if(e=="next"){
	currentGalleryPage++;
	if(currentGalleryPage>totalPage)currentGalleryPage=0}
else if(e=="previous"){
	currentGalleryPage--;
	if(currentGalleryPage<0)currentGalleryPage=totalPage}
else{
	currentGalleryPage=e}
slide_speed=e=="next"||e=="previous"?settings.animation_speed:0;
	slide_to=currentGalleryPage*itemsPerPage*itemWidth;
	$pp_gallery.find("ul").animate({
	left:-slide_to}
,slide_speed)}
;
	e.prettyPhoto.startSlideshow=function(){
	if(typeof m=="undefined"){
	$pp_pic_holder.find(".pp_play").unbind("click").removeClass("pp_play").addClass("pp_pause").click(function(){
	e.prettyPhoto.stopSlideshow();
	return false}
);
	m=setInterval(e.prettyPhoto.startSlideshow,settings.slideshow)}
else{
	e.prettyPhoto.changePage("next")}
}
;
	e.prettyPhoto.stopSlideshow=function(){
	$pp_pic_holder.find(".pp_pause").unbind("click").removeClass("pp_pause").addClass("pp_play").click(function(){
	e.prettyPhoto.startSlideshow();
	return false}
);
	clearInterval(m);
	m=undefined}
;
	e.prettyPhoto.close=function(){
	if($pp_overlay.is(":animated"))return;
	e.prettyPhoto.stopSlideshow();
	$pp_pic_holder.stop().find("object,embed").css("visibility","hidden");
	e("div.pp_pic_holder,div.ppt,.pp_fade").fadeOut(settings.animation_speed,function(){
	e(this).remove()}
);
	$pp_overlay.fadeOut(settings.animation_speed,function(){
	if(settings.hideflash)e("object,embed,iframe[src*=youtube],iframe[src*=vimeo]").css("visibility","visible");
	e(this).remove();
	e(window).unbind("scroll.prettyphoto");
	r();
	settings.callback();
	doresize=true;
	f=false;
	delete settings}
)}
;
	if(!pp_alreadyInitialized&&t()){
	pp_alreadyInitialized=true;
	hashIndex=t();
	hashRel=hashIndex;
	hashIndex=hashIndex.substring(hashIndex.indexOf("/")+1,hashIndex.length-1);
	hashRel=hashRel.substring(0,hashRel.indexOf("/"));
	setTimeout(function(){
	e("a["+s.hook+"^='"+hashRel+"']:eq("+hashIndex+")").trigger("click")}
,50)}
return this.unbind("click.prettyphoto").bind("click.prettyphoto",e.prettyPhoto.initialize)}
;
}
)(jQuery);
	var pp_alreadyInitialized=false

JS代码(zzsc.js):

// JavaScript Document$(document).ready(function(){
	$('.pic_next').click(function(){
	if($('.piclist').is(':animated')){
	$('.piclist').stop(true,true);
}
/* 避免点击事件重复 */
ml = parseInt($('.piclist').css('left'));
	r = liw - (700 - ml);
	/* 700为外部区块.infopic的宽度，15为li之间的距离，即.piclist li的margin-right的值 */
if(r<700){
	s = r - 15;
}
else{
	s = 700;
}
$('.piclist').animate({
	left:ml - s + 'px'}
,'slow');
}
)$('.pic_prev').click(function(){
	if($('.piclist').is(':animated')){
	$('.piclist').stop(true,true);
}
/* 避免点击事件重复 */
ml = parseInt($('.piclist').css('left'));
	if(ml>-700){
	s = ml;
}
else{
	s = -700;
}
$('.piclist').animate({
	left:ml - s + 'px'}
,'slow');
}
)}
)//info pic$(window).load(function(){
	liw = 0;
	$('.piclist li').each(function(){
	liw += $(this).width()+15;
	$(this).css('width',$(this).width()+'px');
}
)$('.piclist').width( liw + 'px');
}
)

CSS代码(zzsc.css):

/* common */
*{margin:0;padding:0;font-size:12px;}
input,button,select,textarea{outline:none;}
ul,li,dl,ol{list-style:none;}
iframe,img{border:none;}
textarea{resize:none}
body{color:#333;font-family:'Microsoft YaHei',Arial;}
h1,h2,p,ul,dl,div{text-align:left;font-weight:normal;}
input[type="submit"],input[type="button"]{cursor:pointer;}
input{cursor:expression(this.type=="button"||this.type=="submit"||this.type=="radio"||this.type=="checkbox" ? "pointer":"text");}
/* IE6 */
*+html img{margin-bottom:0!important;}
/* Fix IE7 */
html>body img{margin-bottom:-3px;}
/* Fix FireFox */
@media all and (min-width:0px){img{margin-bottom:-2px!important;}
}
/*Fix Opera */
p,div,span,em,i,b,s,ul,li,dl,dt,dd,td{word-wrap:break-word;word-break:break-all;vertical-align:top;}
th,i,b,s{font-style:normal;font-weight:normal;text-decoration:none;}
div,p{text-align:center;line-height:30px;}
/* CSS Document */
.infopic{width:700px;height:200px;position:relative;overflow:hidden;margin:15px auto;}
.piclist{height:200px;position:absolute;top:0;left:0;}
.piclist li{height:200px;margin-right:15px;float:left;overflow:hidden;}
.piclist li img{height:200px;}
.pic_prev,.pic_next{width:30px;height:50px;background:url(../images/icon.png) no-repeat;position:absolute;top:75px;cursor:pointer;}
.pic_prev{background-position:0 0;left:0;}
.pic_next{background-position:0 -60px;right:0;}

附件:下载该文件资源,减少时间成本(增值服务)