仿百度图片浏览效果

最新推荐文章于 2019-06-12 18:23:00 发布

nbin斌

最新推荐文章于 2019-06-12 18:23:00 发布

阅读量2k

点赞数

分类专栏： javascript 文章标签：前端开发 web javascript 图片浏览图片

本文链接：https://blog.csdn.net/nbin2008/article/details/50471776

版权

javascript 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在线地址：http://www.hui12.com/nbin/demo/imgskim/index.html

https://nbin2008.github.io/demo/imgskim/index.html

index

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿百度图片浏览</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/data.js"></script>
		<script src="js/handleImage.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="container1">
			<div class="main1">
				<!-- 图片显示 -->
				<div class="showImg1">
					<a href="javascript:;" class="showImg1_btnLeft"></a>
					<a href="javascript:;" class="showImg1_btnRight"></a>
					<div class="imgBox1">
						<img src="" class="img1"/>
					</div>
				</div>
				<!-- 图片选择 -->
				<div class="chooseImg1_box">
					<div class="navList1">
						<span class="btnImgList">图片列表<i></i></span>
						<span class="btnImgScale">
							<a href="javascript:;" class="scaleAdd1">+</a>
							<b class="scale1">100%</b>
							<a href="javascript:;" class="scaleReduce1">-</a>
						</span>
						<span class="btnImgInit1">原始尺寸</span>
						<span class="btnImgFullScreen">全屏</span>
						<span>其他</span>
						<span>其他</span>
					</div>
					<div class="boxLimit1">
						<a href="javascript:;" class="chooseImg1_btnLeft"></a>
						<div class="imgListBox1">
							<ul class="imgList1"></ul>
						</div>
						<a href="javascript:;" class="chooseImg1_btnRight"></a>
					</div>
					
				</div>
			</div>
			<div class="sider1">
				<p class="pTroTit1"></p>
				<p class="pTroName1"></p>
			</div>
		</div>
		<!-- 全屏 -->
		<div class="container2">
			<div class="chooseTimeBox">
				<select class="select">
					<option value="2">2s</option>
					<option value="3">3s</option>
					<option value="5">5s</option>
				</select>
				<a href="javascript:;" class="btnStart">开始</a>
				<a href="javascript:;" class="btnStop">||</a>
			</div>
			<!-- main -->
			<div class="imgBox2">
				<img src="" class="img2" />
			</div>
			<a href="javascript:;" class="showImg2_btnLeft"></a>
			<a href="javascript:;" class="showImg2_btnRight"></a>
			<div class="imgListBox2">
				<ul class="imgList2"></ul>
			</div>
			<a href="javascript:;" class="chooseImg2_btnLeft aBtn" ></a>
			<a href="javascript:;" class="chooseImg2_btnRight aBtn"></a>
			<a href="javascript:;" class="btnExitFullScreen">x</a>
		</div>
	</body>
</html>

css

/* common */
*{
	margin: 0; padding: 0;
}
body,html{
	font-family: "微软雅黑"; font-size: 12px; overflow: hidden;
}
li{
	list-style: none;
}
a{
	text-decoration: none; color: #000;
}
.btnIco{
	background: url(../images/btn.png);
}
b{
	font-weight: normal;
}
i{
	font-style: normal;
}

/* container1 */
.container1{
	width: 100%; height: 100%; background-color: #f6f6f6; position: absolute; min-width: 1000px; min-height: 400px; -display: none;
}
.main1{
	position: absolute; width: calc(100% - 310px); height: calc(100% - 5px); left: 0; top: 5px; background-color: #fff;
}
.sider1{
	position: absolute; width: 300px; margin-left: 10px; height: calc(100% - 5px); overflow-x: hidden; overflow-y: auto; top: 5px; right: 0px; background-color: #fff;
}
.showImg1{
	width: 100%; position: relative;
}
.showImg1 a{
	position: absolute; width: 70px; height: 100%; top: 0; background-color: #fff; transition: all 0.5s;
}
.showImg1 a:hover{
	background-color: #e6e6e6;
}
.showImg1 a:before{
	content: ''; display: block; position: absolute; width: 40px; height: 72px; background: url(../images/btn.png); left: calc(50% - 20px); top: calc(50% - 31px);
}
.showImg1 .showImg1_btnLeft{
	left: 0;
}
.showImg1 .showImg1_btnRight{
	right: 0;
}
.showImg1 .showImg1_btnLeft:before{
	background-position: 0 -87px;
}
.showImg1 .showImg1_btnLeft:hover:before{
	background-position: -46px -87px;
}
.showImg1 .showImg1_btnRight:before{
	background-position: 0 0;
}
.showImg1 .showImg1_btnRight:hover:before{
	background-position: -46px 0;
}
.showImg1 .imgBox1{
	position: absolute; width: calc(100% - 144px); height: calc(100% - 4px); left: 72px; top: 2px; overflow: hidden;
}
.showImg1 .imgBox1 .img1{
	position: absolute; display: block;
}
.chooseImg1_box{
	position: relative; overflow: hidden;
}
.navList1{
	height: 38px; line-height: 38px; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; text-align: center; font-size: 14px;
}
.navList1 span{
	margin-left: -3px;
}
.navList1 span, .navList1 a{
	display: inline-block; color: #666; padding: 0 10px; cursor: pointer; position: relative;
}
.navList1 span:before{
	content: '|'; display: block; position: absolute; left: -3px; color: #e3e3e3;
}
.navList1 span:hover:before{
	display: none;
}
.navList1 span:last-child:after{
	content: '|'; display: block; position: absolute; right: 1px; color: #e3e3e3;
}
.navList1 span:hover, .navList1 a:hover{
	background-color: #e3e3e3;
}
.navList1 .btnImgScale, .navList1 .btnImgScale:hover{
	cursor: default; background-color: #fff; padding: 0;
}
.navList1 a{
	padding: 0; width: 30px;
}

.boxLimit1{
	position: relative; width: 100%; height: 100px
}
.boxLimit1 a{
	float: left; display: block; width: 25px; height: 70px; margin: 15px 2px 0; position: relative;
}
.boxLimit1 a:hover{
	background-color: #e6e6e6;
}
.boxLimit1 a.disable{
	background-color: #fff;
}
.boxLimit1 a:before{
	content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);
}
.boxLimit1 .chooseImg1_btnLeft:before, .boxLimit1 .chooseImg1_btnLeft.disable:hover:before{
	background-position: -27px -174px;
}
.boxLimit1 .chooseImg1_btnLeft.disable:hover:before{
	cursor: default;
}
.boxLimit1 .chooseImg1_btnLeft:hover:before{
	background-position: -73px -174px;
}
.boxLimit1 .chooseImg1_btnRight:before, .boxLimit1 .chooseImg1_btnRight.disable:hover:before{
	background-position: 0 -174px;
}
.boxLimit1 .chooseImg1_btnRight.disable:hover:before{
	cursor: default;
}
.boxLimit1 .chooseImg1_btnRight:hover:before{
	background-position: -46px -174px;
}
.imgListBox1{
	position: relative; width: calc(100% - 58px); height: 90px; padding: 4px 0 6px; float: left; overflow: hidden;
}
.imgListBox1 .imgList1{
	padding-top: 5px; position: absolute; left: 0; top: 0; transition: left 0.5s; float: left;
}
.imgListBox1 .imgList1 li{
	float: left; width: 68px; height: 68px; border: 1px solid #dfdfdf; margin-top: 10px; margin-right: 10px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;
}
.imgListBox1 .imgList1 li.active{
	width: 76px; height: 76px; border: 2px solid #3388fb; margin-top: 5px; background-image: url(../images/a1.jpg);
}

/* 全屏 */
.container2{
	width: 100%; height: 100%; background-color: #262626; position: absolute; display: none;
}
.btnExitFullScreen{
	color: #989898; position: absolute; top: 1%; right: 1%; font-size: 20px; line-height: 20px;
}
.chooseTimeBox{
	position: absolute; width: 70px; text-align: center; height: 20px; line-height: 20px; background-color: #3d3d3d; left: calc(50% - 35px); top: 1.5%;
}
.chooseTimeBox *{
	color: #e1e1e1;
}
.chooseTimeBox .select{
	background: #121212; color: #999999; width: 40px; height: 18px; left: 2px; top:1px; outline: none; display: none; float: left; position: relative; top: 1px;
}
.chooseTimeBox .btnStart{
	-display: none;
}
.chooseTimeBox .btnStop{
	display: none; position: relative; top: -1px;
}
.imgBox2{
	position: absolute; width: 70%; height: calc(90% - 144px); -border: 1px solid red; left: 15%; top: 8%;
}
.imgBox2 img{
	position: absolute;
}
.showImg2_btnLeft, .showImg2_btnRight{
	width: 50%; height: calc(90% - 144px); position: absolute; top: 8%; -border: 1px solid #fff;
}
.showImg2_btnLeft{
	left: 0; cursor: url(../images/cur_left.jpg),auto;;
}
.showImg2_btnRight{
	right: 0; cursor: url(../images/cur_right.jpg),auto;;
}
.imgListBox2{
	position: absolute; width: 80%; height: 140px; border: 1px solid #3e3e3e; left: 10%; bottom: 2%; overflow: hidden;
}
.imgList2{
	position: absolute; left: 0; top: 0; width: 100%; height: 110px; top: 15px; transition: left 0.5s;
}
.imgList2 li{
	width: 110px; height: 110px; box-sizing: border-box; border: 1px solid #707070; float: left; margin-right: 5px; background-image: url(../images/a2.jpg); background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer;
}
.imgList2 li.active{
	border: 2px solid #2f95d5;
}

.container2 .aBtn{
	position: absolute; display: block; width: 25px; height: 70px; margin: 15px 2px 0;
}
.container2 .aBtn:hover{
	background-color: #e6e6e6;
}
.container2 .aBtn.disable{
	background-color: #fff;
}
.container2 .aBtn:before{
	content: ''; display: block; position: absolute; width: 14px; height: 27px; left: calc(50% - 7px); top: calc(50% - 13px); background: url(../images/btn.png);
}
.container2 .chooseImg2_btnLeft{
	left: calc(10% - 50px); bottom: calc(2% + 35px);
}
.container2 .chooseImg2_btnRight{
	right: calc(10% - 50px); bottom: calc(2% + 35px);
}
.container2 .chooseImg2_btnLeft:before, .container2 .chooseImg2_btnLeft.disable:hover:before{
	background-position: -27px -174px;
}
.container2 .chooseImg2_btnLeft.disable:hover:before{
	cursor: default;
}
.container2 .chooseImg2_btnLeft:hover:before{
	background-position: -73px -174px;
}
.container2 .chooseImg2_btnRight:before, .container2 .chooseImg2_btnRight.disable:hover:before{
	background-position: 0 -174px;
}
.container2 .chooseImg2_btnRight.disable:hover:before{
	cursor: default;
}
.container2 .chooseImg2_btnRight:hover:before{
	background-position: -46px -174px;
}

data.js

var imgData = [
	{
		src: 'images/a1.jpg',
		title: 'a1.jpg',
		name: '火影忍着1'
	},
	{
		src: 'images/a2.jpg',
		title: 'a2.jpg',
		name: '火影忍着3'
	},
	{
		src: 'images/a3.jpg',
		title: 'a3.jpg',
		name: '火影忍着3'
	},
	{
		src: 'images/a4.jpg',
		title: 'a4.jpg',
		name: '火影忍着4'
	},
	{
		src: 'images/a5.jpg',
		title: 'a5.jpg',
		name: '火影忍着5'
	},
	{
		src: 'images/a6.jpg',
		title: 'a6.jpg',
		name: '火影忍着6'
	},
	{
		src: 'images/a7.jpg',
		title: 'a7.jpg',
		name: '火影忍着7'
	},
	{
		src: 'images/a8.jpg',
		title: 'a8.jpg',
		name: '火影忍着8'
	},
	{
		src: 'images/a9.jpg',
		title: 'a9.jpg',
		name: '火影忍着9'
	},
	{
		src: 'images/a10.jpg',
		title: 'a10.jpg',
		name: '火影忍着10'
	},
	{
		src: 'images/a11.jpg',
		title: 'a11.jpg',
		name: '火影忍着11'
	},
	{
		src: 'images/a12.jpg',
		title: 'a12.jpg',
		name: '火影忍着12'
	},
	{
		src: 'images/a13.jpg',
		title: 'a13.jpg',
		name: '火影忍着13'
	},
	{
		src: 'images/a14.jpg',
		title: 'a14.jpg',
		name: '火影忍着14'
	},
	{
		src: 'images/a15.jpg',
		title: 'a15.jpg',
		name: '火影忍着15'
	},
	{
		src: 'images/a16.jpg',
		title: 'a16.jpg',
		name: '火影忍着16'
	},
	{
		src: 'images/a17.jpg',
		title: 'a17.jpg',
		name: '火影忍着17'
	},
	{
		src: 'images/a18.jpg',
		title: 'a18.jpg',
		name: '火影忍着18'
	},
	{
		src: 'images/a19.jpg',
		title: 'a19.jpg',
		name: '火影忍着19'
	},
	{
		src: 'images/a20.jpg',
		title: 'a20.jpg',
		name: '火影忍着20'
	}
];

handleImage.js

(function(window,$){
	function HandleImage(e){
		this.init(e);
	};
	var proto = {
		init: function(e){
			this.nb = {};
			this.nb.$box = e.box;
			this.nb.$img = e.img;
			this.setBoxWH();
			this.imgMouseEvent();
		},
		//对外提供，重置盒子的宽高，resize事件需要调用
		setBoxWH: function(){
			this.nb.bWidth = this.nb.$box.width();
			this.nb.bHeight = this.nb.$box.height();
		},
		getImgWH: function(src,isNormal,callback){
			var self = this;
			var img = new Image();
			img.onload = function(){
				self.nb.mWidth = img.width;
				self.nb.mHeight = img.height;
				self.setStartPosition(isNormal);
				callback && callback();
			};
			img.src = src;
		},
		//对外提供，输入图片地址,isNormal：true（初始不缩放）
		setImg: function(src,isNormal,callback){
			this.getImgWH(src,isNormal,callback);
			this.nb.$img.attr('src',src);
		},
		//初始化图片位置
		setStartPosition: function(isNormal){
			var self = this;
			var bW = self.nb.bWidth = self.nb.$box.width();
<span style="white-space:pre">				</span>bH = self.nb.bHeight = self.nb.$box.height();
				mW = self.nb.mWidth,
				mH = self.nb.mHeight;
			var sScale = self.nb.nScale = Math.min(bW/mW,bH/mH);
			if( sScale>=1 || isNormal ){
				self.nb.nScale = 1;
				self.nb.left = (bW-mW)/2;
				self.nb.top = (bH-mH)/2;
				self.nb.$img.css({
					'width': mW,
					'height': mH,
					'left': (bW-mW)/2,
					'top': (bH-mH)/2
				})
			}else{
				self.nb.left = (bW-mW*sScale)/2;
				self.nb.top = (bH-mH*sScale)/2;
				self.nb.$img.css({
					'width': mW*sScale,
					'height': mH*sScale,
					'left': (bW-mW*sScale)/2,
					'top': (bH-mH*sScale)/2
				})
			};
			this.setCenter();
		},
		setCenter: function(){
			var self = this;
			this.nb.centerX = self.nb.left + self.nb.mWidth*self.nb.nScale/2;
			this.nb.centerY = self.nb.top + self.nb.mHeight*self.nb.nScale/2;
		},
		//对外提供，改变图片大小
		setScale: function(str,callback){
			var self = this;
			if( str == 'plus'){
				self.nb.nScale += 0.1;
			}else if( str == 'reduce' ){
				self.nb.nScale -= 0.1;
			};
			self.nb.nScale = self.nb.nScale>=10?10:self.nb.nScale;
			self.nb.nScale = self.nb.nScale<=0.1?0.1:self.nb.nScale;
			self.nb.left = self.nb.centerX - self.nb.mWidth*self.nb.nScale/2;
			self.nb.top = self.nb.centerY - self.nb.mHeight*self.nb.nScale/2;
			self.nb.$img.css({
				'width': self.nb.mWidth*self.nb.nScale,
				'height': self.nb.mHeight*self.nb.nScale,
				'left': self.nb.left,
				'top': self.nb.top
			});
			callback && callback();
		},
		//对外提供，获取缩放比例
		getScale: function(){
			return this.nb.nScale;
		},
		imgMouseEvent: function(){
			var self = this;
			var sX,sY,disX,disY,sImgX,sImgY,b;
			self.nb.$img.on('mousedown',function(e){
				b = true;
				sX = e.pageX;
				sY = e.pageY;
				sImgX = self.nb.left;
				sImgY = self.nb.top;
			});
			$(document).on('mousemove',function(e){
				if( !b ) return;
				self.nb.$img.css({
					'left': sImgX + e.pageX - sX,
					'top': sImgY + e.pageY - sY
				});
				return false;
			});
			$(document).on('mouseup',function(){
				b = false;
				self.nb.left = parseInt(self.nb.$img.css('left'));
				self.nb.top = parseInt(self.nb.$img.css('top'));
				self.setCenter();
			});
		}
	};
	HandleImage.prototype = proto;
	window.HandleImage = HandleImage;
})(window,jQuery);

index.js

$(document).ready(function(){
	var $win = $(window),
		$con1 = $('.container1'),
		$main1 = $('.main1'),
		$showImg1 = $('.showImg1'),
		$showImg1_btnLeft = $('.showImg1_btnLeft'),
		$showImg1_btnRight = $('.showImg1_btnRight'),
		$imgBox1 = $('.imgBox1'),
		$img1 = $('.img1'),
		$showImg1_btnLeft = $('.showImg1_btnLeft'),
		$showImg1_btnRight = $('.showImg1_btnRight'),
		$chooseImg1_btnLeft = $('.chooseImg1_btnLeft'),
		$chooseImg1_btnRight = $('.chooseImg1_btnRight'),
		$chooseImg1_box = $('.chooseImg1_box'),
		$scale1 = $('.scale1'),
		$btnImgInit1 = $('.btnImgInit1'),
		$btnImgFullScreen = $('.btnImgFullScreen'),
		
		$sider1 = $('.sider1'),
		$imgListBox1 = $('.imgListBox1'),
		$imgList1 = $('.imgList1');
	//container2-fullscreen对象
	var $con2 = $('.container2'),
		$select = $('.select'),
		$btnStart = $('.btnStart'),
		$btnStop = $('.btnStop'),
		$btnExitFullScreen = $('.btnExitFullScreen'),
		$imgBox2 = $('.imgBox2'),
		$img2 = $('.img2'),
		$showImg2_btnLeft = $('.showImg2_btnLeft'),
		$showImg2_btnRight = $('.showImg2_btnRight'),
		$chooseImg2_btnLeft = $('.chooseImg2_btnLeft'),
		$chooseImg2_btnRight = $('.chooseImg2_btnRight'),
		$imgListBox2 = $('.imgListBox2'),
		$imgList2 = $('.imgList2');
		
	var winW = $win.width(),
		winH = $win.height();
	//图片处理事件
	var h1;
	var handle = {
		init1: function(){
			h1 = new HandleImage({
				box: $imgBox1,
				img: $img1
			});
		},
		setImg1: function(src,isNormal){
			h1.setImg(src,isNormal,function(){
				imgListEvent.setScaleText();
			});
		}
	};
	
	//窗口改变事件
	var envFunc = {
		fnSize: function(){
			$(window).on('resize',function(){
				winW = $win.width(),
				winH = $win.height();
				containEvent.setCon();
				containEvent.setShowImg1_height();
				imgListEvent.imgList1_position();
				h1.setBoxWH();
			});
		}
	};
	envFunc.fnSize();
	
	//cantanier事件
	var containEvent = {
		init: function(){
			this.setCon();
			this.setShowImg1_height();
			handle.init1();
		},
		//设置container宽高
		setCon: function(){
			$con1.css({
				'width': winW,
				'height': winH
			});
			$con2.css({
				'width': winW,
				'height': winH
			});
		},
		//设置图片控制区高
		setShowImg1_height: function(){
			$showImg1.css({
				'height': $main1.height() - $chooseImg1_box.height()
			})
		},
		showText: function(data){
			$('.pTroTit1').text(data['src']);
			$('.pTroName1').text(data['title']);
		}
	};
	containEvent.init();
	
	//图片选择	普通的width：70+10, 选中active：80+10
	var $liActive_1;
	var index = 0;
	var imgListEvent = {
		init: function(){
			this.imgList1_add();
			this.imgList1_click();
			this.scaleEvent();
			this.mouseWheelEvent();
			this.fnClick();
		},
		imgList1_add: function(){
			var str = ''
			for( var i=0; i<imgData.length; i++ ){
				var tmp = imgData[i];
				str += '<li style="background-image:url('+ tmp.src +')" ></li>'
			};
			$imgList1.append(str);
			$imgList1.css({
				'width': (70+10)*imgData.length + 10
			});
		},
		imgList1_click: function(){
			var self = this;
			$imgList1.find('li').on('click',function(){
				if( $liActive_1 ) $liActive_1.removeClass('active');
				index = $(this).index();
				$(this).addClass('active');
				$liActive_1 = $(this);
				self.imgList1_position();
				handle.setImg1( imgData[index]['src'] );
				containEvent.showText( imgData[index] );
			});
			$imgList1.find('li').eq(0).trigger('click');
		},
		imgList1_position: function(){
			var boxWidth1 = $imgListBox1.width();
			var le = (boxWidth1/2 - index*80);
			le = Math.floor(le/80)*80;
			le = le>=0?0:le;
			var maxLe = (boxWidth1-$imgList1.width())+10;
			le = le<maxLe?maxLe:le;
			$imgList1.css({
				'left': le
			})
		},
		scaleEvent: function(){
			var timer = null;
			var btnPos = {
				x: null,
				y: null
			};
			var fnCallback = function(){
				imgListEvent.setScaleText();
			};
			$('.scaleAdd1').on('mousedown',function(e){
				h1.setScale('plus',fnCallback);
				checkBtnPos(e);
				timer = setTimeout(function(){
					fnAnimate('plus');
				},500);
			});
			$('.scaleReduce1').on('mousedown',function(e){
				h1.setScale('reduce',fnCallback);
				checkBtnPos(e);
				timer = setTimeout(function(){
					fnAnimate('reduce');
				},500);
			});
			$('.scaleAdd1').add($('.scaleReduce1')).on('mouseup',function(){
				clearInterval(timer);
				return false;
			});
			$('.scaleAdd1').add($('.scaleReduce1')).on('mousemove',function(e){
				if( Math.abs(e.pageX-btnPos.x)>=5 || Math.abs(e.pageY-btnPos.y)>=5 ){
					clearInterval(timer);
				};
				return false;
			});
			function checkBtnPos(e){
				btnPos.x = e.pageX;
				btnPos.y = e.pageY;
			};
			function fnAnimate(str){
				if( str == 'plus' ){
					timer = setInterval(function(){
						h1.setScale('plus',fnCallback);
					},30);
				}else if( str == 'reduce'){
					timer = setInterval(function(){
						h1.setScale('reduce',fnCallback);
					},30)
				};
			};
		},
		mouseWheelEvent: function(){
			var imgBox1 = $imgBox1.get(0);
			if( document.attachEvent ){
				imgBox1.attachEvent('onmousewheel',move)
			};
			if( document.addEventListener ){
				imgBox1.addEventListener('mousewheel',move,false);
				imgBox1.addEventListener('mousewheel',move,false);
			};
			var fnCallback = function(){
				imgListEvent.setScaleText();
			};
			function move(e){
				var up = true;
				if( e.wheelDelta ){
					up = e.wheelDelta > 0 ? true : false;
				};
				if( e.detail ){
					up = e.detail < 0 ? true : false;
				};
				if( up ){
					h1.setScale('plus',fnCallback);
				}else{
					h1.setScale('reduce',fnCallback);
				};
				if( e.preventDefault ){
					e.preventDefault();
				}else{
					e.returnValue = false;
				}
			};
		},
		setScaleText: function(){
			var scale = Math.round(h1.getScale()*100);
			$scale1.text(scale+'%');
		},
		fnClick: function(){
			$showImg1_btnRight.on('click',function(){
				$liActive_1.next().trigger('click');
			});
			$showImg1_btnLeft.on('click',function(){
				$liActive_1.prev().trigger('click');
			});
			$chooseImg1_btnLeft.on('click',function(){
				var w = $imgListBox1.width();
				var le = parseInt($imgList1.css('left')) + w;
				if( le > 0 ) le = 0;
				$imgList1.css({
					'left': le
				})
			});
			$chooseImg1_btnRight.on('click',function(){
				var w = $imgListBox1.width();
				var minLe = w - $imgList1.width();
				var le = parseInt($imgList1.css('left')) - w;
				if( le <  minLe ) le = minLe;
				$imgList1.css({
					'left': le
				})
			});
			$btnImgInit1.on('click',function(){
				handle.setImg1( imgData[index]['src'], true );
			});
			$btnImgFullScreen.on('click',function(){
				fullScreen.enterFull();
			});
		}
	};
	imgListEvent.init();
	
	/*
	 * container2
	 */
	var $liActive_2;
	var timer2;
	function setImg2(src){
		$imgBox2;
		$img2;
		var bW,bH,mW,mH;
		var img = new Image();
		$img2.attr('src',src);
		img.onload = function(){
			mW = img.width;
			mH = img.height;
			bW = $imgBox2.width();
			bH = $imgBox2.height();
			setPosition();
		};
		img.src = src;
		function setPosition(){
			var sScale = Math.min(bW/mW,bH/mH);
			if( sScale>=1 ){
				$img2.css({
					'width': mW,
					'height': mH,
					'left': (bW-mW)/2,
					'top': (bH-mH)/2
				});
			}else{
				$img2.css({
					'width': mW*sScale,
					'height': mH*sScale,
					'left': (bW-mW*sScale)/2,
					'top': (bH-mH*sScale)/2
				});
			};
		};
	};
	var fullScreen = {
		init: function(){
			this.addImg();
			this.addClick();
		},
		addImg: function(){
			var str = ''
			for( var i=0; i<imgData.length; i++ ){
				var tmp = imgData[i];
				str += '<li style="background-image:url('+ tmp.src +')" ></li>'
			};
			$imgList2.append(str);
			$imgList2.css({
				'width': 115*imgData.length
			});
		},
		addClick: function(){
			var self = this;
			$imgList2.find('li').on('click',function(){
				if( $liActive_2 ) $liActive_2.removeClass('active');
				index = $(this).index();
				$(this).addClass('active');
				$liActive_2 = $(this);
				self.imgList2_position();
				setImg2( imgData[index]['src'] );
			});
			$showImg2_btnRight.on('click',function(){
				$liActive_2.next().trigger('click');
			});
			$showImg2_btnLeft.on('click',function(){
				$liActive_2.prev().trigger('click');
			});
			$chooseImg2_btnLeft.on('click',function(){
				var w = $imgListBox2.width();
				var le = parseInt($imgList2.css('left')) + w;
				if( le > 0 ) le = 0;
				$imgList2.css({
					'left': le
				})
			});
			$chooseImg2_btnRight.on('click',function(){
				var w = $imgListBox2.width();
				var minLe = w - $imgList2.width();
				var le = parseInt($imgList2.css('left')) - w;
				if( le <  minLe ) le = minLe;
				$imgList2.css({
					'left': le
				})
			});
			$btnExitFullScreen.on('click',function(){
				self.exitFull();
			});
		},
		imgList2_position: function(){
			var boxWidth2 = $imgListBox2.width();
			var le = (boxWidth2/2 - index*115);
			le = Math.floor(le/115)*115;
			le = le>=0?0:le;
			var maxLe = (boxWidth2-$imgList2.width());
			le = le<maxLe?maxLe:le;
			$imgList2.css({
				'left': le
			});
		},
		enterFull: function(){
			var self = this;
			enterFullscreen();
			$con1.css('opacity','0');
			$con2.show();
			setTimeout(function(){
				$imgList2.find('li').eq(index).trigger('click');
			},500);
			//esc keyCode:27
			$(document).on('keyup.a',function(e){
				if( e.keyCode == 27 ){
					self.exitFull();
				};
			});
		},
		exitFull: function(){
			clearInterval(timer2);
			$(document).off('keyup.a');
			$con1.css('opacity','1');
			$con2.hide();
			animateEvent.showStart();
			setTimeout(function(){
<span style="white-space:pre">				</span>$imgList1.find('li').eq(index).trigger('click');
<span style="white-space:pre">			</span>},500);
			exitFullscreen();
		}
	};
	fullScreen.init();
//	fullScreen.enterFull();
	
	//定时器
	var animateEvent = {
		init: function(){
			var self = this;
			$btnStart.on('click',function(){
				self.start();
			});
			$btnStop.on('click',function(){
				self.stop();
			});
			$select.on('change',function(){
				self.start();
			});
		},
		start: function(){
			this.showStop();
			var intervalTime = parseInt($select.val())*1000;
			clearInterval(timer2);
			timer2 = setInterval(function(){
				$liActive_2.next().trigger('click');
			},intervalTime);
		},
		stop: function(){
			clearInterval(timer2);
			this.showStart();
		},
		showStart: function(){
			clearInterval(timer2);
			$select.show().val('2');
			$select.hide();
			$btnStop.hide();
			$btnStart.show();
		},
		showStop: function(){
			$btnStart.hide();
			$btnStop.show();
			$select.show();
		}
	};
	animateEvent.init();
	
	/*
	 * 全屏事件
	 */
	// 判断各种浏览器
	function enterFullscreen() {
		var element = document.documentElement;
		if (element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
		} else if (element.webkitRequestFullscreen) {
			element.webkitRequestFullscreen();
		} else if (element.msRequestFullscreen) {
			element.msRequestFullscreen();
		}
	}
	// 判断浏览器种类
	function exitFullscreen() {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitExitFullscreen) {
			document.webkitExitFullscreen();
		}
	}
});