banner滚动选择+固定滑块

<!-- 引入jquery -->
	<script src="public/jquery.min.js"></script>
	<!-- banner的文件 -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
	<script type="text/javascript" src="js/jquery.pikachoose.min.js"></script>
	<script type="text/javascript" src="js/jquery.touchwipe.min.js"></script>
	<link type="text/css" rel="stylesheet" href="css/case/banner.css" />

	<div class="pikachoose">
			<ul id="pikame" class="jcarousel-skin-pika">
				<li v-for="(item,index) in portDataImages" :key="index"><img :src="item" /></li>
			</ul>
		</div>

data: function () {
			return {
				portDataImages: [], //返回的请求数据
			}
		},
		created() {
			this.search()
		},
		watch: {
			portDataImages: function () {
				this.$nextTick(function () {
					$("#pikame").PikaChoose({
						carousel: true,
						carouselVertical: true
					});
				});
			},
		},
		methods: {
			// 请求
			search() {
				this.portDataImages = [
					//图片赋值
				]

			},
		}

//banner.css文件

/* Just for the example. Fee free to delete these three lines */
body {
	font-family: Helvetica, sans-serif;
}

.pikachoose {

}

/* Style the thumbnails */
.pika-thumbs {
	padding: 0 1.6vh;
	height: 7.5vh;
}

.pika-thumbs li {
	width: 32vh;
	height: 7.4vh;
	margin: 1vh 0 0 1.7vh;
	padding: 0;
	overflow: hidden;
	float: left;
	list-style-type: none;
	margin: 0 5px;
	background: #fafafa;
	border: 0vh solid #e5e5e5;
	cursor: pointer;
}

.pika-thumbs li .clip {
	position: relative;
	height: 16.8vh;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
}

.pika-thumbs li .clip img {
	width: 100%;
	height: calc(100% - 6px);
}

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage,
.pika-textnav {
	width: 77%;
}

.pika-stage {
	position: relative;
	background: #fafafa;
	border: 1px solid #e5e5e5;
	text-align: center;
	height: 71vh;
}

.pika-stage img {
	width: 100%;
	height: 100%;
}

/* .pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75);  border: 1px solid #141414; font-size: 11px; 
    color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;} */

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {
	position: absolute;
	text-indent: -5000px;
	display: block;
	z-index: 3;
}

.pika-imgnav a.previous {
	background: url(../../images/case/prev.png) no-repeat;
	background-size: 100%;
	height: 5vh;
	width: 5vh;
	top: 46%;
	left: 2%;
	cursor: pointer;
}

.pika-imgnav a.next {
	background: url(../../images/case/next.png) no-repeat;
	background-size: 100%;
	height: 5vh;
	width: 5vh;
	top: 46%;
	right: 2%;
	cursor: pointer;
}

.pika-imgnav a.play {
	background: url(../../images/case/play.png) no-repeat 0% 50%;
	height: 10vh;
	width: 4.4vh;
	top: 0;
	left: 50%;
	display: none;
	cursor: pointer;
}

.pika-imgnav a.pause {
	background: url(../../images/case/pause.png) no-repeat 0% 50%;
	height: 10vh;
	width: 4.4vh;
	top: 0;
	left: 50%;
	display: none;
	cursor: pointer;
}

/* The previous and next textual buttons */
.pika-textnav {
	display: none;
	overflow: hidden;
	margin: 1vh 0 0 0;
	bottom: 1vh;
	position: absolute;
}

.pika-textnav a {
	font-size: 1.2vh;
	text-decoration: none;
	color: #333;
	padding: 4px;
}

.pika-textnav a.previous {
	float: left;
	width: auto;
	display: block;
}

.pika-textnav a.next {
	float: right;
	width: auto;
	display: block;
}

/*for the tool tips*/
.pika-tooltip {
	font-size: 1.2vh;
	position: absolute;
	color: white;
	padding: 3px;
	background-color: rgba(0, 0, 0, 0.7);
	border: 3px solid black;
}

.pika-counter {
	position: absolute;
	bottom: 3%;
	left: 2%;
	color: white;
	background: rgba(255, 255, 255, 0.4);
	font-size: 1.1vh;
	padding: 6px 1.2vh;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */
.pika-loader {
	background: url(loading.gif) 3px 3px no-repeat #000;
	background-color: rgba(0, 0, 0, 0.9);
	color: white;
	width: 6vh;
	font-size: 1.1vh;
	padding: 5px 3px;
	text-align: right;
	position: absolute;
	top: 1.5vh;
	right: 1.5vh;
}

/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
.pika-thumbs li {
	width: 32vh;
	height: 16.9vh;
}

.pikachoose {
	width: 52vh;
	margin: 0 auto;
	width: 100%;
	position: relative;
	width: 84%;
	margin: 0 150px;
	margin-bottom: 6.4vh;
}

#pikame {
	width: 32vh;
}

.pika-thumbs {
	margin: 1vh 0 0 0vh;
	width: 32vh;
	position: absolute;
	top: 1vh;
}

.pika-thumbs li {
	margin: 5px 0;
}

/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika {
	position: absolute;
	top: 0vh;
	right: 0vh;
}

.jcarousel-skin-pika .jcarousel-container-vertical {
	width: 32vh;
	height: 71vh;
	overflow: hidden;
}

.jcarousel-skin-pika .jcarousel-clip-vertical {
	width: 32vh;
	height: 71vh;
}

.jcarousel-skin-pika .jcarousel-item-vertical {}

.active {
	background: #1088E9;
	color: #fff;
	border: 3px solid #1088E9;
	width: calc(100% - 6px) !important;
	/* height: calc(1.7vh - 16px) !important; */
	/* padding-bottom:  3px; */
}

/* 适配 */
/* 视口>= 1920  设置样式*/
/* @media screen and (min-width: 1920px) {
	.box {
		display: none;
	}
} */
/* 视口>=700 并且 <= 1000  设置样式*/
/* @media screen and (min-width: 700px) and (max-width: 1000px) {} */
/* 视口<= 768  设置样式*/
@media screen and (max-width: 768px) {
	.jcarousel-skin-pika {
		display: none;
	}

/* 	.jcarousel-skin-pika .jcarousel-clip-vertical,.jcarousel-skin-pika .jcarousel-container-vertical {
		height: fit-content !important;
	}

	.jcarousel-clip #pikame {
		height: fit-content !important;
		display: flex;
	} */

}

//jquery.jcarousel.min.js文件

//add browser back in. jCarousel relies on it.
(function( jQuery, window, undefined ) {
"use strict";
var matched, browser;
jQuery.uaMatch = function( ua ) {
  ua = ua.toLowerCase();
	var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
		/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
		/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
		/(msie) ([\w.]+)/.exec( ua ) ||
		ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
		[];
	return {
		browser: match[ 1 ] || "",
		version: match[ 2 ] || "0"
	};
};
matched = jQuery.uaMatch( window.navigator.userAgent );
browser = {};
if ( matched.browser ) {
	browser[ matched.browser ] = true;
	browser.version = matched.version;
}
// Chrome is Webkit, but Webkit is also Safari.
if ( browser.chrome ) {
	browser.webkit = true;
} else if ( browser.webkit ) {
	browser.safari = true;
}
jQuery.browser = browser;
})( jQuery, window );

/*!
 * jCarousel - Riding carousels with jQuery
 *   http://sorgalla.com/jcarousel/
 *
 * Copyright (c) 2006 Jan Sorgalla (http://sorgalla.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Built on top of the jQuery library
 *   http://jquery.com
 *
 * Inspired by the "Carousel Component" by Bill Scott
 *   http://billwscott.com/carousel/
 */

(function(g){var q={vertical:!1,rtl:!1,start:1,offset:1,size:null,scroll:3,visible:null,animation:"normal",easing:"swing",auto:0,wrap:null,initCallback:null,setupCallback:null,reloadCallback:null,itemLoadCallback:null,itemFirstInCallback:null,itemFirstOutCallback:null,itemLastInCallback:null,itemLastOutCallback:null,itemVisibleInCallback:null,itemVisibleOutCallback:null,animationStepCallback:null,buttonNextHTML:"<div></div>",buttonPrevHTML:"<div></div>",buttonNextEvent:"click",buttonPrevEvent:"click", buttonNextCallback:null,buttonPrevCallback:null,itemFallbackDimension:null},m=!1;g(window).bind("load.jcarousel",function(){m=!0});g.jcarousel=function(a,c){this.options=g.extend({},q,c||{});this.autoStopped=this.locked=!1;this.buttonPrevState=this.buttonNextState=this.buttonPrev=this.buttonNext=this.list=this.clip=this.container=null;if(!c||c.rtl===void 0)this.options.rtl=(g(a).attr("dir")||g("html").attr("dir")||"").toLowerCase()=="rtl";this.wh=!this.options.vertical?"width":"height";this.lt=!this.options.vertical? this.options.rtl?"right":"left":"top";for(var b="",d=a.className.split(" "),f=0;f<d.length;f++)if(d[f].indexOf("jcarousel-skin")!=-1){g(a).removeClass(d[f]);b=d[f];break}a.nodeName.toUpperCase()=="UL"||a.nodeName.toUpperCase()=="OL"?(this.list=g(a),this.clip=this.list.parents(".jcarousel-clip"),this.container=this.list.parents(".jcarousel-container")):(this.container=g(a),this.list=this.container.find("ul,ol").eq(0),this.clip=this.container.find(".jcarousel-clip"));if(this.clip.size()===0)this.clip= this.list.wrap("<div></div>").parent();if(this.container.size()===0)this.container=this.clip.wrap("<div></div>").parent();b!==""&&this.container.parent()[0].className.indexOf("jcarousel-skin")==-1&&this.container.wrap('<div class=" '+b+'"></div>');this.buttonPrev=g(".jcarousel-prev",this.container);if(this.buttonPrev.size()===0&&this.options.buttonPrevHTML!==null)this.buttonPrev=g(this.options.buttonPrevHTML).appendTo(this.container);this.buttonPrev.addClass(this.className("jcarousel-prev"));this.buttonNext= g(".jcarousel-next",this.container);if(this.buttonNext.size()===0&&this.options.buttonNextHTML!==null)this.buttonNext=g(this.options.buttonNextHTML).appendTo(this.container);this.buttonNext.addClass(this.className("jcarousel-next"));this.clip.addClass(this.className("jcarousel-clip")).css({position:"relative"});this.list.addClass(this.className("jcarousel-list")).css({overflow:"hidden",position:"relative",top:0,margin:0,padding:0}).css(this.options.rtl?"right":"left",0);this.container.addClass(this.className("jcarousel-container")).css({position:"relative"}); !this.options.vertical&&this.options.rtl&&this.container.addClass("jcarousel-direction-rtl").attr("dir","rtl");var j=this.options.visible!==null?Math.ceil(this.clipping()/this.options.visible):null,b=this.list.children("li"),e=this;if(b.size()>0){var h=0,i=this.options.offset;b.each(function(){e.format(this,i++);h+=e.dimension(this,j)});this.list.css(this.wh,h+100+"px");if(!c||c.size===void 0)this.options.size=b.size()}this.container.css("display","block");this.buttonNext.css("display","block");this.buttonPrev.css("display", "block");this.funcNext=function(){e.next()};this.funcPrev=function(){e.prev()};this.funcResize=function(){e.resizeTimer&&clearTimeout(e.resizeTimer);e.resizeTimer=setTimeout(function(){e.reload()},100)};this.options.initCallback!==null&&this.options.initCallback(this,"init");!m&&g.browser.safari?(this.buttons(!1,!1),g(window).bind("load.jcarousel",function(){e.setup()})):this.setup()};var f=g.jcarousel;f.fn=f.prototype={jcarousel:"0.2.8"};f.fn.extend=f.extend=g.extend;f.fn.extend({setup:function(){this.prevLast= this.prevFirst=this.last=this.first=null;this.animating=!1;this.tail=this.resizeTimer=this.timer=null;this.inTail=!1;if(!this.locked){this.list.css(this.lt,this.pos(this.options.offset)+"px");var a=this.pos(this.options.start,!0);this.prevFirst=this.prevLast=null;this.animate(a,!1);g(window).unbind("resize.jcarousel",this.funcResize).bind("resize.jcarousel",this.funcResize);this.options.setupCallback!==null&&this.options.setupCallback(this)}},reset:function(){this.list.empty();this.list.css(this.lt, "0px");this.list.css(this.wh,"10px");this.options.initCallback!==null&&this.options.initCallback(this,"reset");this.setup()},reload:function(){this.tail!==null&&this.inTail&&this.list.css(this.lt,f.intval(this.list.css(this.lt))+this.tail);this.tail=null;this.inTail=!1;this.options.reloadCallback!==null&&this.options.reloadCallback(this);if(this.options.visible!==null){var a=this,c=Math.ceil(this.clipping()/this.options.visible),b=0,d=0;this.list.children("li").each(function(f){b+=a.dimension(this, c);f+1<a.first&&(d=b)});this.list.css(this.wh,b+"px");this.list.css(this.lt,-d+"px")}this.scroll(this.first,!1)},lock:function(){this.locked=!0;this.buttons()},unlock:function(){this.locked=!1;this.buttons()},size:function(a){if(a!==void 0)this.options.size=a,this.locked||this.buttons();return this.options.size},has:function(a,c){if(c===void 0||!c)c=a;if(this.options.size!==null&&c>this.options.size)c=this.options.size;for(var b=a;b<=c;b++){var d=this.get(b);if(!d.length||d.hasClass("jcarousel-item-placeholder"))return!1}return!0}, get:function(a){return g(">.jcarousel-item-"+a,this.list)},add:function(a,c){var b=this.get(a),d=0,p=g(c);if(b.length===0)for(var j,e=f.intval(a),b=this.create(a);;){if(j=this.get(--e),e<=0||j.length){e<=0?this.list.prepend(b):j.after(b);break}}else d=this.dimension(b);p.get(0).nodeName.toUpperCase()=="LI"?(b.replaceWith(p),b=p):b.empty().append(c);this.format(b.removeClass(this.className("jcarousel-item-placeholder")),a);p=this.options.visible!==null?Math.ceil(this.clipping()/this.options.visible): null;d=this.dimension(b,p)-d;a>0&&a<this.first&&this.list.css(this.lt,f.intval(this.list.css(this.lt))-d+"px");this.list.css(this.wh,f.intval(this.list.css(this.wh))+d+"px");return b},remove:function(a){var c=this.get(a);if(c.length&&!(a>=this.first&&a<=this.last)){var b=this.dimension(c);a<this.first&&this.list.css(this.lt,f.intval(this.list.css(this.lt))+b+"px");c.remove();this.list.css(this.wh,f.intval(this.list.css(this.wh))-b+"px")}},next:function(){this.tail!==null&&!this.inTail?this.scrollTail(!1): this.scroll((this.options.wrap=="both"||this.options.wrap=="last")&&this.options.size!==null&&this.last==this.options.size?1:this.first+this.options.scroll)},prev:function(){this.tail!==null&&this.inTail?this.scrollTail(!0):this.scroll((this.options.wrap=="both"||this.options.wrap=="first")&&this.options.size!==null&&this.first==1?this.options.size:this.first-this.options.scroll)},scrollTail:function(a){if(!this.locked&&!this.animating&&this.tail){this.pauseAuto();var c=f.intval(this.list.css(this.lt)), c=!a?c-this.tail:c+this.tail;this.inTail=!a;this.prevFirst=this.first;this.prevLast=this.last;this.animate(c)}},scroll:function(a,c){!this.locked&&!this.animating&&(this.pauseAuto(),this.animate(this.pos(a),c))},pos:function(a,c){var b=f.intval(this.list.css(this.lt));if(this.locked||this.animating)return b;this.options.wrap!="circular"&&(a=a<1?1:this.options.size&&a>this.options.size?this.options.size:a);for(var d=this.first>a,g=this.options.wrap!="circular"&&this.first<=1?1:this.first,j=d?this.get(g): this.get(this.last),e=d?g:g-1,h=null,i=0,k=!1,l=0;d?--e>=a:++e<a;){h=this.get(e);k=!h.length;if(h.length===0&&(h=this.create(e).addClass(this.className("jcarousel-item-placeholder")),j[d?"before":"after"](h),this.first!==null&&this.options.wrap=="circular"&&this.options.size!==null&&(e<=0||e>this.options.size)))j=this.get(this.index(e)),j.length&&(h=this.add(e,j.clone(!0)));j=h;l=this.dimension(h);k&&(i+=l);if(this.first!==null&&(this.options.wrap=="circular"||e>=1&&(this.options.size===null||e<= this.options.size)))b=d?b+l:b-l}for(var g=this.clipping(),m=[],o=0,n=0,j=this.get(a-1),e=a;++o;){h=this.get(e);k=!h.length;if(h.length===0){h=this.create(e).addClass(this.className("jcarousel-item-placeholder"));if(j.length===0)this.list.prepend(h);else j[d?"before":"after"](h);if(this.first!==null&&this.options.wrap=="circular"&&this.options.size!==null&&(e<=0||e>this.options.size))j=this.get(this.index(e)),j.length&&(h=this.add(e,j.clone(!0)))}j=h;l=this.dimension(h);if(l===0)throw Error("jCarousel: No width/height set for items. This will cause an infinite loop. Aborting..."); this.options.wrap!="circular"&&this.options.size!==null&&e>this.options.size?m.push(h):k&&(i+=l);n+=l;if(n>=g)break;e++}for(h=0;h<m.length;h++)m[h].remove();i>0&&(this.list.css(this.wh,this.dimension(this.list)+i+"px"),d&&(b-=i,this.list.css(this.lt,f.intval(this.list.css(this.lt))-i+"px")));i=a+o-1;if(this.options.wrap!="circular"&&this.options.size&&i>this.options.size)i=this.options.size;if(e>i){o=0;e=i;for(n=0;++o;){h=this.get(e--);if(!h.length)break;n+=this.dimension(h);if(n>=g)break}}e=i-o+ 1;this.options.wrap!="circular"&&e<1&&(e=1);if(this.inTail&&d)b+=this.tail,this.inTail=!1;this.tail=null;if(this.options.wrap!="circular"&&i==this.options.size&&i-o+1>=1&&(d=f.intval(this.get(i).css(!this.options.vertical?"marginRight":"marginBottom")),n-d>g))this.tail=n-g-d;if(c&&a===this.options.size&&this.tail)b-=this.tail,this.inTail=!0;for(;a-- >e;)b+=this.dimension(this.get(a));this.prevFirst=this.first;this.prevLast=this.last;this.first=e;this.last=i;return b},animate:function(a,c){if(!this.locked&& !this.animating){this.animating=!0;var b=this,d=function(){b.animating=!1;a===0&&b.list.css(b.lt,0);!b.autoStopped&&(b.options.wrap=="circular"||b.options.wrap=="both"||b.options.wrap=="last"||b.options.size===null||b.last<b.options.size||b.last==b.options.size&&b.tail!==null&&!b.inTail)&&b.startAuto();b.buttons();b.notify("onAfterAnimation");if(b.options.wrap=="circular"&&b.options.size!==null)for(var c=b.prevFirst;c<=b.prevLast;c++)c!==null&&!(c>=b.first&&c<=b.last)&&(c<1||c>b.options.size)&&b.remove(c)}; this.notify("onBeforeAnimation");if(!this.options.animation||c===!1)this.list.css(this.lt,a+"px"),d();else{var f=!this.options.vertical?this.options.rtl?{right:a}:{left:a}:{top:a},d={duration:this.options.animation,easing:this.options.easing,complete:d};if(g.isFunction(this.options.animationStepCallback))d.step=this.options.animationStepCallback;this.list.animate(f,d)}}},startAuto:function(a){if(a!==void 0)this.options.auto=a;if(this.options.auto===0)return this.stopAuto();if(this.timer===null){this.autoStopped= !1;var c=this;this.timer=window.setTimeout(function(){c.next()},this.options.auto*1E3)}},stopAuto:function(){this.pauseAuto();this.autoStopped=!0},pauseAuto:function(){if(this.timer!==null)window.clearTimeout(this.timer),this.timer=null},buttons:function(a,c){if(a==null&&(a=!this.locked&&this.options.size!==0&&(this.options.wrap&&this.options.wrap!="first"||this.options.size===null||this.last<this.options.size),!this.locked&&(!this.options.wrap||this.options.wrap=="first")&&this.options.size!==null&& this.last>=this.options.size))a=this.tail!==null&&!this.inTail;if(c==null&&(c=!this.locked&&this.options.size!==0&&(this.options.wrap&&this.options.wrap!="last"||this.first>1),!this.locked&&(!this.options.wrap||this.options.wrap=="last")&&this.options.size!==null&&this.first==1))c=this.tail!==null&&this.inTail;var b=this;this.buttonNext.size()>0?(this.buttonNext.unbind(this.options.buttonNextEvent+".jcarousel",this.funcNext),a&&this.buttonNext.bind(this.options.buttonNextEvent+".jcarousel",this.funcNext), this.buttonNext[a?"removeClass":"addClass"](this.className("jcarousel-next-disabled")).attr("disabled",a?!1:!0),this.options.buttonNextCallback!==null&&this.buttonNext.data("jcarouselstate")!=a&&this.buttonNext.each(function(){b.options.buttonNextCallback(b,this,a)}).data("jcarouselstate",a)):this.options.buttonNextCallback!==null&&this.buttonNextState!=a&&this.options.buttonNextCallback(b,null,a);this.buttonPrev.size()>0?(this.buttonPrev.unbind(this.options.buttonPrevEvent+".jcarousel",this.funcPrev), c&&this.buttonPrev.bind(this.options.buttonPrevEvent+".jcarousel",this.funcPrev),this.buttonPrev[c?"removeClass":"addClass"](this.className("jcarousel-prev-disabled")).attr("disabled",c?!1:!0),this.options.buttonPrevCallback!==null&&this.buttonPrev.data("jcarouselstate")!=c&&this.buttonPrev.each(function(){b.options.buttonPrevCallback(b,this,c)}).data("jcarouselstate",c)):this.options.buttonPrevCallback!==null&&this.buttonPrevState!=c&&this.options.buttonPrevCallback(b,null,c);this.buttonNextState= a;this.buttonPrevState=c},notify:function(a){var c=this.prevFirst===null?"init":this.prevFirst<this.first?"next":"prev";this.callback("itemLoadCallback",a,c);this.prevFirst!==this.first&&(this.callback("itemFirstInCallback",a,c,this.first),this.callback("itemFirstOutCallback",a,c,this.prevFirst));this.prevLast!==this.last&&(this.callback("itemLastInCallback",a,c,this.last),this.callback("itemLastOutCallback",a,c,this.prevLast));this.callback("itemVisibleInCallback",a,c,this.first,this.last,this.prevFirst, this.prevLast);this.callback("itemVisibleOutCallback",a,c,this.prevFirst,this.prevLast,this.first,this.last)},callback:function(a,c,b,d,f,j,e){if(!(this.options[a]==null||typeof this.options[a]!="object"&&c!="onAfterAnimation")){var h=typeof this.options[a]=="object"?this.options[a][c]:this.options[a];if(g.isFunction(h)){var i=this;if(d===void 0)h(i,b,c);else if(f===void 0)this.get(d).each(function(){h(i,this,d,b,c)});else for(var a=function(a){i.get(a).each(function(){h(i,this,a,b,c)})},k=d;k<=f;k++)k!== null&&!(k>=j&&k<=e)&&a(k)}}},create:function(a){return this.format("<li></li>",a)},format:function(a,c){for(var a=g(a),b=a.get(0).className.split(" "),d=0;d<b.length;d++)b[d].indexOf("jcarousel-")!=-1&&a.removeClass(b[d]);a.addClass(this.className("jcarousel-item")).addClass(this.className("jcarousel-item-"+c)).css({"float":this.options.rtl?"right":"left","list-style":"none"}).attr("jcarouselindex",c);return a},className:function(a){return a+" "+a+(!this.options.vertical?"-horizontal":"-vertical")}, dimension:function(a,c){var b=g(a);if(c==null)return!this.options.vertical?b.outerWidth(!0)||f.intval(this.options.itemFallbackDimension):b.outerHeight(!0)||f.intval(this.options.itemFallbackDimension);else{var d=!this.options.vertical?c-f.intval(b.css("marginLeft"))-f.intval(b.css("marginRight")):c-f.intval(b.css("marginTop"))-f.intval(b.css("marginBottom"));g(b).css(this.wh,d+"px");return this.dimension(b)}},clipping:function(){return!this.options.vertical?this.clip[0].offsetWidth-f.intval(this.clip.css("borderLeftWidth"))- f.intval(this.clip.css("borderRightWidth")):this.clip[0].offsetHeight-f.intval(this.clip.css("borderTopWidth"))-f.intval(this.clip.css("borderBottomWidth"))},index:function(a,c){if(c==null)c=this.options.size;return Math.round(((a-1)/c-Math.floor((a-1)/c))*c)+1}});f.extend({defaults:function(a){return g.extend(q,a||{})},intval:function(a){a=parseInt(a,10);return isNaN(a)?0:a},windowLoaded:function(){m=!0}});g.fn.jcarousel=function(a){if(typeof a=="string"){var c=g(this).data("jcarousel"),b=Array.prototype.slice.call(arguments, 1);return c[a].apply(c,b)}else return this.each(function(){var b=g(this).data("jcarousel");b?(a&&g.extend(b.options,a),b.reload()):g(this).data("jcarousel",new f(this,a))})}})(jQuery);

//jquery.pikachoose.min.js文件

(function($){"";"use strict";var defaults={autoPlay:true,speed:5000,text:{play:"",stop:"",previous:"Previous",next:"Next",loading:"Loading"},transition:[1],showCaption:true,IESafe:false,showTooltips:false,carousel:false,swipe:true,carouselVertical:false,animationFinished:null,buildFinished:null,bindsFinished:null,startOn:0,thumbOpacity:0.7,hoverPause:false,animationSpeed:600,fadeThumbsIn:false,carouselOptions:{},thumbChangeEvent:'click.pikachoose',stopOnClick:false,hideThumbnails:false};$.fn.PikaChoose=function(o){return this.each(function(){$(this).data('pikachoose',new $pc(this,o));});};$.PikaChoose=function(e,o){this.options=$.extend({},defaults,o||{});this.list=null;this.image=null;this.anchor=null;this.caption=null;this.imgNav=null;this.imgPlay=null;this.imgPrev=null;this.imgNext=null;this.textNext=null;this.textPrev=null;this.previous=null;this.next=null;this.aniWrap=null;this.aniDiv=null;this.aniImg=null;this.thumbs=null;this.transition=null;this.active=null;this.tooltip=null;this.animating=false;this.stillOut=null;this.counter=null;this.timeOut=null;this.pikaStage=null;if(typeof(this.options.data)!="undefined"){e=$("<ul></ul>").addClass("jcarousel-skin-pika").appendTo(e);$.each(this.options.data,function(){var tmp=null;if(typeof(this.link)!="undefined"){tmp=$("<li><a href='"+this.link+"'><img></a></li>").appendTo(e);if(typeof(this.title)!="undefined"){tmp.find('a').attr('title',this.title);}}else{tmp=$("<li><img></li>").appendTo(e);}
if(typeof(this.caption)!="undefined"){tmp.append("<span>"+this.caption+"</span>");}
if(typeof(this.thumbnail)!="undefined"){tmp.find('img').attr('ref',this.image);tmp.find('img').attr('src',this.thumbnail);}else{tmp.find('img').attr('src',this.image);}});}
if(e instanceof jQuery||e.nodeName.toUpperCase()=='UL'||e.nodeName.toUpperCase()=='OL'){this.list=$(e);this.build();this.bindEvents();}else{return;}
var y=0;var x=0;for(var t=0;t<25;t++){var a='<div col="'+y+'" row="'+x+'"></div>';this.aniDiv.append(a);y++;if(y==5){x++;y=0;}}};var $pc=$.PikaChoose;$pc.fn=$pc.prototype={version:"96"};$.fn.pikachoose=$.fn.PikaChoose;$pc.fn.extend=$pc.extend=$.extend;$pc.fn.extend({build:function(){this.step=0;if(this.options.pikaStage){this.wrap=this.options.pikaStage;this.wrap.addClass('pika-stage');}else{this.wrap=$("<div class='pika-stage'></div>").insertBefore(this.list);}
this.image=$("<img>").appendTo(this.wrap);this.imgNav=$("<div class='pika-imgnav'></div>").insertAfter(this.image);this.imgPlay=$("<a></a>").appendTo(this.imgNav);this.counter=$("<span class='pika-counter'></span>").appendTo(this.imgNav);if(this.options.autoPlay){this.imgPlay.addClass('pause');}else{this.imgPlay.addClass('play');}
this.imgPrev=$("<a class='previous'></a>").insertAfter(this.imgPlay);this.imgNext=$("<a class='next'></a>").insertAfter(this.imgPrev);this.caption=$("<div class='caption'></div>").insertAfter(this.imgNav).hide();this.tooltip=$("<div class='pika-tooltip'></div>").insertAfter(this.list).hide();this.aniWrap=$("<div class='pika-aniwrap'></div>").insertAfter(this.caption);this.aniImg=$("<img>").appendTo(this.aniWrap).hide();this.aniDiv=$("<div class='pika-ani'></div>").appendTo(this.aniWrap);this.textNav=$("<div class='pika-textnav'></div>").insertAfter(this.aniWrap);this.textPrev=$("<a class='previous'>"+this.options.text.previous+"</a>").appendTo(this.textNav);this.textNext=$("<a class='next'>"+this.options.text.next+"</a>").appendTo(this.textNav);this.list.addClass('pika-thumbs');this.thumbs=this.list.find('img');this.loader=$("<div class='pika-loader'></div>").appendTo(this.wrap).hide().html(this.options.text.loading);this.active=this.thumbs.eq(this.options.startOn);this.finishAnimating({'index':this.options.startOn,'source':this.active.attr('ref')||this.active.attr('src'),'caption':this.active.parents('li:first').find('span:first').html(),'clickThrough':this.active.parent().attr('href')||"",'clickThroughTarget':this.active.parent().attr('target')||"",'clickThroughTitle':this.active.parent().attr('title')||""});this.aniDiv.css({position:'relative'});var self=this;this.updateThumbs();if(this.options.fadeThumbsIn){this.list.fadeIn();}
if(this.options.hideThumbnails){this.list.hide();}
if(this.options.carousel&&$.fn.jcarousel){var carouselDefaults={vertical:this.options.carouselVertical,initCallback:function(carousel){jQuery(carousel.list).find('img').click(function(e,x){if(typeof(x)!=='undefined'&&x.how=="auto"){if(self.options.autoPlay===false){return false;}}
var clicked=parseInt(jQuery(this).parents('.jcarousel-item').attr('jcarouselindex'),10);var last=(jQuery(this).parents('ul').find('li:last').attr('jcarouselindex')==clicked-1)?true:false;if(!last){clicked=(clicked-2<=0)?0:clicked-2;}
clicked++;carousel.scroll(clicked);});}};var carouselOptions=$.extend({},carouselDefaults,this.options.carouselOptions||{});this.list.jcarousel(carouselOptions);}
if(this.options.swipe&&$.fn.touchwipe){this.wrap.touchwipe({wipeLeft:function(){self.Next();},wipeRight:function(){self.Prev();}});}
if(typeof(this.options.buildFinished)=='function'){this.options.buildFinished(this);}},createThumb:function(ele){var self=ele;var that=this;this.thumbs=this.list.find('img');if(typeof $.data(ele[0],'source')!=='undefined'){return;}
ele.parents('li:first').wrapInner("<div class='clip' />");self.hide();$.data(ele[0],'clickThrough',self.parent('a').attr('href')||"");$.data(ele[0],'clickThroughTarget',self.parent('a').attr('target')||"");$.data(ele[0],'clickThroughTitle',self.parent('a').attr('title')||"");if(self.parent('a').length>0){self.unwrap();}
$.data(ele[0],'caption',self.next('span').html()||"");self.next('span').remove();$.data(ele[0],'source',self.attr('ref')||self.attr('src'));$.data(ele[0],'imageTitle',self.attr('title')||"");$.data(ele[0],'imageAlt',self.attr('alt')||"");$.data(ele[0],'index',this.thumbs.index(ele));$.data(ele[0],'order',self.closest('ul').find('li').index(self.parents('li')));var data=$.data(ele[0]);$('<img />').on('load',{data:data},function(){if(typeof(that.options.buildThumbStart)=='function'){that.options.buildThumbStart(that);}
var img=$(this);var w=this.width;var h=this.height;if(w===0){w=img.attr("width");}
if(h===0){h=img.attr("height");}
var ph=parseInt(self.parents('.clip').css('height').slice(0,-2),10);var pw=parseInt(self.parents('.clip').css('width').slice(0,-2),10);if(pw===0){pw=self.parents('li:first').outerWidth();}
if(ph===0){ph=self.parents('li:first').outerHeight();}
var rw=pw/w;var rh=ph/h;var ratio;if(rw<rh){self.css({height:'100%'});self.fadeTo(0.001,0);self.css({left:-(self.outerWidth()-pw)/2});self.hide();}else{self.css({width:'100%'});}
self.hover(function(e){clearTimeout(that.stillOut);$(this).stop(true,true).fadeTo(250,1);if(!that.options.showTooltips){return;}
that.tooltip.show().stop(true,true).html(data.caption).animate({top:$(this).parent().position().top,left:$(this).parent().position().left,opacity:1.0},'fast');},function(e){if(!$(this).hasClass("active")){$(this).stop(true,true).fadeTo(250,that.options.thumbOpacity);that.stillOut=setTimeout(that.hideTooltip,700);}});if(data.order==that.options.startOn){self.fadeTo(250,1);self.addClass('active');self.parents('li').eq(0).addClass('active');}else{self.fadeTo(250,that.options.thumbOpacity);}
if(typeof(that.options.buildThumbFinish)=='function'){that.options.buildThumbFinish(that);}}).attr('src',self.attr('src'));},bindEvents:function(){this.thumbs.on(this.options.thumbChangeEvent,{self:this},this.imgClick);this.imgNext.on('click.pikachoose',{self:this},this.nextClick);this.textNext.on('click.pikachoose',{self:this},this.nextClick);this.imgPrev.on('click.pikachoose',{self:this},this.prevClick);this.textPrev.on('click.pikachoose',{self:this},this.prevClick);this.imgPlay.unbind('click.pikachoose').on('click.pikachoose',{self:this},this.playClick);this.wrap.unbind('mouseenter.pikachoose').on('mouseenter.pikachoose',{self:this},function(e){e.data.self.imgNav.stop(true,true).fadeTo('slow',1.0);if(e.data.self.options.hoverPause===true){clearTimeout(e.data.self.timeOut);}});this.wrap.unbind('mouseleave.pikachoose').on('mouseleave.pikachoose',{self:this},function(e){e.data.self.imgNav.stop(true,true).fadeTo('slow',0.0);if(e.data.self.options.autoPlay&&e.data.self.options.hoverPause){e.data.self.timeOut=setTimeout((function(self){return function(){self.nextClick();};})(e.data.self),e.data.self.options.speed);}});this.tooltip.unbind('mouseenter.pikachoose').on('mouseenter.pikachoose',{self:this},function(e){clearTimeout(e.data.self.stillOut);});this.tooltip.unbind('mouseleave.pikachoose').on('mouseleave.pikachoose',{self:this},function(e){e.data.self.stillOut=setTimeout(e.data.self.hideTooltip,700);});if(typeof(this.options.bindsFinished)=='function'){this.options.bindsFinished(this);}},hideTooltip:function(e){$(".pika-tooltip").animate({opacity:0.01});},imgClick:function(e,x){var self=e.data.self;var data=$.data(this);if(self.animating){return;}
if(typeof(x)=='undefined'||x.how!="auto"){if(self.options.autoPlay&&self.options.stopOnClick){self.imgPlay.trigger('click');}else{clearTimeout(self.timeOut);}}else{if(!self.options.autoPlay){return false;}}
if($(this).attr('src')!==$.data(this).source){self.loader.fadeIn('fast');}
self.caption.fadeOut('slow');self.animating=true;self.active.fadeTo(300,self.options.thumbOpacity).removeClass('active');self.active.parents('.active').eq(0).removeClass('active');self.active=$(this);self.active.addClass('active').fadeTo(200,1);self.active.parents('li').eq(0).addClass('active');$('<img />').on('load',{self:self,data:data},function(){self.loader.fadeOut('fast');self.aniDiv.css({height:self.image.height(),width:self.image.width()}).show();self.aniDiv.children('div').css({'width':'20%','height':'20%','float':'left'});var n=0;if(self.options.transition[0]==-1){n=Math.floor(Math.random()*7)+1;}else{n=self.options.transition[self.step];self.step++;if(self.step>=self.options.transition.length){self.step=0;}}
if(self.options.IESafe&&$.browser.msie){n=1;}
self.doAnimation(n,data);}).attr('src',$.data(this).source);},doAnimation:function(n,data){this.aniWrap.css({position:'absolute',top:this.wrap.css('padding-top'),left:this.wrap.css('padding-left'),width:this.wrap.width()});var self=this;self.image.stop(true,false);self.caption.stop().fadeOut();var aWidth=self.aniDiv.children('div').eq(0).width();var aHeight=self.aniDiv.children('div').eq(0).height();var img=new Image();$(img).attr('src',data.source);if(img.height!=self.image.height()||img.width!=self.image.width()){if(n!==0&&n!==1&&n!==7){}}
self.aniDiv.css({height:self.image.height(),width:self.image.width()});self.aniDiv.children().each(function(){var div=$(this);var xOffset=Math.floor(div.parent().width()/5)*div.attr('col');var yOffset=Math.floor(div.parent().height()/5)*div.attr('row');div.css({'background':'url('+data.source+') -'+xOffset+'px -'+yOffset+'px','background-size':div.parent().width()+'px '+div.parent().height()+'px','width':'0px','height':'0px','position':'absolute','top':yOffset+'px','left':xOffset+'px','float':'none'});});self.aniDiv.hide();self.aniImg.hide();switch(n){case 0:self.image.stop(true,true).fadeOut(self.options.animationSpeed,function(){self.image.attr('src',data.source).fadeIn(self.options.animationSpeed,function(){self.finishAnimating(data);});});break;case 1:self.aniDiv.hide();self.aniImg.height(self.image.height()).hide().attr('src',data.source);self.wrap.css({height:self.image.height()});$.when(self.image.fadeOut(self.options.animationSpeed),self.aniImg.eq(0).fadeIn(self.options.animationSpeed)).done(function(){self.finishAnimating(data);});break;case 2:self.aniDiv.show().children().hide().each(function(index){var delay=index*30;$(this).css({opacity:0.1}).show().delay(delay).animate({opacity:1,"width":aWidth,"height":aHeight},200,'linear',function(){if(self.aniDiv.find("div").index(this)==24){self.finishAnimating(data);}});});break;case 3:self.aniDiv.show().children("div:lt(5)").hide().each(function(index){var delay=$(this).attr('col')*100;$(this).css({opacity:0.1,"width":aWidth}).show().delay(delay).animate({opacity:1,"height":self.image.height()},self.options.animationSpeed,'linear',function(){if(self.aniDiv.find(" div").index(this)==4){self.finishAnimating(data);}});});break;case 4:self.aniDiv.show().children().hide().each(function(index){if(index>4){return;}
var delay=$(this).attr('col')*30;var gap=self.gapper($(this),aHeight,aWidth);var speed=self.options.animationSpeed*0.7;$(this).css({opacity:0.1,"height":"100%"}).show().delay(delay).animate({opacity:1,"width":gap.width},speed,'linear',function(){if(self.aniDiv.find(" div").index(this)==4){self.finishAnimating(data);}});});break;case 5:self.aniDiv.show().children().show().each(function(index){var delay=index*Math.floor(Math.random()*5)*7;var gap=self.gapper($(this),aHeight,aWidth);if($(".animation div").index(this)==24){delay=700;}
$(this).css({"height":gap.height,"width":gap.width,"opacity":0.01}).delay(delay).animate({"opacity":1},self.options.animationSpeed,function(){if(self.aniDiv.find(" div").index(this)==24){self.finishAnimating(data);}});});break;case 6:self.aniDiv.height(self.image.height()).hide().css({'background':'url('+data.source+') top left no-repeat'});self.aniDiv.children('div').hide();self.aniDiv.css({width:0}).show().animate({width:self.image.width()},self.options.animationSpeed,function(){self.finishAnimating(data);self.aniDiv.css({'background':'transparent'});});break;case 7:self.wrap.css({overflow:'hidden'});self.aniImg.height(self.image.height()).hide().attr('src',data.source);self.aniDiv.hide();self.image.css({position:'relative'}).animate({left:"-"+self.wrap.outerWidth()+"px"});self.aniImg.show();self.aniWrap.css({left:self.wrap.outerWidth()}).show().animate({left:"0px"},self.options.animationSpeed,function(){self.finishAnimating(data);});break;}},finishAnimating:function(data){this.animating=false;this.image.attr('src',data.source);this.image.attr('alt',data.imageAlt);this.image.attr('title',data.imageTitle);this.image.css({left:"0"});this.image.show();var self=this;$('<img />').on('load',function(){self.aniImg.fadeOut('fast');self.aniDiv.fadeOut('fast');}).attr('src',data.source);var cur=data.index+1;var total=this.thumbs.length;this.counter.html(cur+"/"+total);if(data.clickThrough!==""){if(this.anchor===null){this.anchor=this.image.wrap("<a>").parent();}
this.anchor.attr('href',data.clickThrough);this.anchor.attr('title',data.clickThroughTitle);this.anchor.attr('target',data.clickThroughTarget);}else{if(this.image.parent('a').length>0){this.image.unwrap();}
this.anchor=null;}
if(this.options.showCaption&&data.caption!==""&&data.caption!==null){this.caption.html(data.caption).fadeTo('slow',1);}
if(this.options.autoPlay&&total>1){this.timeOut=setTimeout((function(self){return function(){self.nextClick();};})(this),this.options.speed,this.timeOut);}
if(typeof(this.options.animationFinished)=='function'){this.options.animationFinished(this);}},gapper:function(ele,aHeight,aWidth){var gap;if(ele.attr('row')==4){gap=(this.aniDiv.height()-(aHeight*5))+aHeight;aHeight=gap;}
if(ele.attr('col')==4){gap=(this.aniDiv.width()-(aWidth*5))+aWidth;aWidth=gap;}
return{height:aHeight,width:aWidth};},nextClick:function(e){var how="natural";var self=null;try{self=e.data.self;if(typeof(e.data.self.options.next)=='function'){e.data.self.options.next(this);}}catch(err){self=this;how="auto";}
var next=self.active.parents('li:first').next().find('img');if(next.length===0){next=self.list.find('img').eq(0);}
next.trigger('click',{how:how});return next;},prevClick:function(e){if(typeof(e.data.self.options.previous)=='function'){e.data.self.options.previous(this);}
var self=e.data.self;var prev=self.active.parents('li:first').prev().find('img');if(prev.length===0){prev=self.list.find('img:last');}
prev.trigger('click');return prev;},playClick:function(e){var self=e.data.self;self.options.autoPlay=!self.options.autoPlay;self.imgPlay.toggleClass('play').toggleClass('pause');if(self.options.autoPlay){self.nextClick();}else{clearTimeout(self.timeOut);}
return(self.options.autoPlay)?"playing":"paused";},Next:function(){var e={data:{self:this}};return this.nextClick(e);},Prev:function(){var e={data:{self:this}};return this.prevClick(e);},GoTo:function(v){var e={data:{self:this}};var gotoImg=this.list.find('img').eq(v);if(gotoImg.length>0){gotoImg.trigger('click');return gotoImg;}else{throw"Image not found. Images are 0 indexed.";}},Play:function(){if(this.options.autoPlay){return"playing";}
var e={data:{self:this}};return this.playClick(e);},Pause:function(){if(!this.options.autoPlay){return"paused";}
var e={data:{self:this}};return this.playClick(e);},updateThumbs:function(){var self=this;this.thumbs=this.list.find('img');this.thumbs.each(function(){self.createThumb($(this),self);});}});})(jQuery);

//jquery.touchwipe.min.js文件

/**
 * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
 * Common usage: wipe images (left and right to show the previous or next image)
 * 
 * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
 * @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems)
 * @version 1.1 (1st September 2010) - support wipe up and wipe down
 * @version 1.0 (15th July 2010)
 */
(function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false}function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault()}if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX-x;var dy=startY-y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft()}else{config.wipeRight()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false)}}if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false)}});return this}})(jQuery);