├── README.md
├── img
    ├── 0.jpg
    ├── 1.jpg
    ├── 10.jpg
    ├── 11.jpg
    ├── 12.jpg
    ├── 13.jpg
    ├── 14.jpg
    ├── 15.jpg
    ├── 16.jpg
    ├── 17.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── 7.jpg
    ├── 8.jpg
    └── 9.jpg
├── index.html
├── jquery-3.3.1.js
└── style.css


/README.md:
--------------------------------------------------------------------------------
1 | # Dialog  
2 | 自定义封装dialog 弹窗插件  
3 | 一款基于jquery的弹窗小demo  
4 | 


--------------------------------------------------------------------------------
/img/0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/0.jpg


--------------------------------------------------------------------------------
/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/1.jpg


--------------------------------------------------------------------------------
/img/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/10.jpg


--------------------------------------------------------------------------------
/img/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/11.jpg


--------------------------------------------------------------------------------
/img/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/12.jpg


--------------------------------------------------------------------------------
/img/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/13.jpg


--------------------------------------------------------------------------------
/img/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/14.jpg


--------------------------------------------------------------------------------
/img/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/15.jpg


--------------------------------------------------------------------------------
/img/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/16.jpg


--------------------------------------------------------------------------------
/img/17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/17.jpg


--------------------------------------------------------------------------------
/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/2.jpg


--------------------------------------------------------------------------------
/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/3.jpg


--------------------------------------------------------------------------------
/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/4.jpg


--------------------------------------------------------------------------------
/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/5.jpg


--------------------------------------------------------------------------------
/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/6.jpg


--------------------------------------------------------------------------------
/img/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/7.jpg


--------------------------------------------------------------------------------
/img/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/8.jpg


--------------------------------------------------------------------------------
/img/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/guanguangithub/dialog/15ee00af7024871ac594157b9b196ed5aab37cea/img/9.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>Document</title>
  7 |     <link rel="stylesheet" href="style.css">
  8 |     <script src="jquery-3.3.1.js"></script>
  9 | </head>
 10 | 
 11 | <body>
 12 |     <div class="wrap">
 13 |         <div class="tit">
 14 |             <h2>点击图片查看效果</h2>
 15 |             <div class="img"><img src="img/0.jpg" alt=""></div>
 16 |         </div>
 17 |     </div>
 18 | 
 19 |     <div class="mark">
 20 |         <div class="mark_1">
 21 |             <div class="title">
 22 |                 <span>查看大图</span><span>×</span>
 23 |             </div>
 24 |             <div class="content">
 25 |                 <ul class="left">
 26 |                     <li><img src="img/0.jpg" alt=""></li>
 27 |                     <ol class="btn">
 28 |                         <li> < </li>
 29 |                         <li> > </li>
 30 |                     </ol>
 31 |                 </ul>
 32 |                 <div class="right">
 33 |                     <h2>图片信息 mou</h2>
 34 |                     <ol class="imgList">
 35 | 
 36 |                     </ol>
 37 |                     <form>
 38 |                         <button type="button"> < </button>
 39 |                         <span>1/2</span>
 40 |                         <button type="button"> > </button>
 41 |                     </form>
 42 |                 </div>
 43 |             </div>
 44 |         </div>
 45 |     </div>
 46 | 	<script>
 47 | 		$(function(){
 48 | 
 49 | 			function Img(){
 50 | 				//创建一个数组,存储源数据
 51 | 				this.img_data = ["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg","img/14.jpg","img/15.jpg","img/16.jpg","img/17.jpg"];
 52 | 				//表示的是当前显示图片的下标
 53 | 				this.img_index = 0;	
 54 | 
 55 | 				//每页显示多少张图片
 56 | 				this.img_pageCount = 8;
 57 | 
 58 | 				//一共显示多少页
 59 | 				this.page_count = Math.ceil( this.img_data.length / this.img_pageCount );
 60 | 
 61 | 				//当前显示的图片的页数
 62 | 				this.page_index = 0;
 63 | 
 64 | 				this.init();
 65 | 			}
 66 | 			Img.prototype = {
 67 | 				constructor : Img,
 68 | 				init : function(){
 69 | 					this.bindEvent();
 70 | 					//找到 当前页的图片
 71 | 					var arr = this.filterData(this.page_index);
 72 | 					this.render(arr);
 73 | 				},
 74 | 				bindEvent : function(){
 75 | 					this.maskShow();
 76 | 					this.maskClick();
 77 | 				},
 78 | 				maskShow : function(){
 79 | 					$(".img img").click(function(){
 80 | 						$(".mark").show();
 81 | 					});
 82 | 				},
 83 | 				//遮罩层里按钮点击方法
 84 | 				maskClick : function(){
 85 | 
 86 | 					var _this = this;
 87 | 					//叉号点击方法
 88 | 					$(".title span:last").click(function(){
 89 | 						$(".mark").hide();
 90 | 					});
 91 | 					//下一张图片
 92 | 					$(".btn li:last").click(function(){
 93 | 						_this.img_index += 1;
 94 | 
 95 | 						if(_this.img_index > _this.img_pageCount - 1){
 96 | 							_this.page_index += 1;
 97 | 							_this.img_index = 0;	
 98 | 						}
 99 | 						
100 | 						var arr = _this.filterData(_this.page_index);
101 | 						_this.render(arr);
102 | 						$(".imgList li").eq(_this.img_index).addClass("current").siblings().removeClass("current");
103 | 						var img_url = $(".imgList li").eq(_this.img_index).find("img").attr("src");
104 | 						$(".left img").attr("src",img_url);
105 | 					});
106 | 
107 | 					//上一张图片
108 | 					$(".btn li:first").click(function(){
109 | 						_this.img_index -= 1;
110 | 						if(_this.img_index < 0) {
111 | 							_this.page_index -= 1;
112 | 							//
113 | 							if(_this.page_index < 0){
114 | 								//
115 | 								_this.page_index = _this.page_count - 1;
116 | 								_this.img_index = _this.img_data.length % _this.img_pageCount - 1;
117 | 							}else{
118 | 								_this.img_index = _this.img_pageCount - 1;
119 | 							}
120 | 						}
121 | 						var arr = _this.filterData(_this.page_index);
122 | 						_this.render(arr);
123 | 						$(".imgList li").eq(_this.img_index).addClass("current").siblings().removeClass("current");
124 | 					});
125 | 
126 | 					//点击每一张图片的方法
127 | 					$(".imgList").on("click","li",function(){
128 | 						_this.img_index = $(this).index();
129 | 						$(this).addClass("current").siblings().removeClass("current");
130 | 						var img_url = $(this).find("img").attr("src");
131 | 						$(".left img").attr('src',img_url);
132 | 					});
133 | 					//上一页
134 | 					$("form button:first").click(function(){
135 | 						_this.page_index -= 1;
136 | 						if(_this.page_index < 0){
137 | 							_this.page_index = _this.page_count -1;
138 | 						}
139 | 						_this.img_index = 0;
140 | 						var arr = _this.filterData(_this.page_index);
141 | 						_this.render(arr);
142 | 					});
143 | 					//下一页
144 | 					$("form button:last").click(function(){
145 | 						_this.page_index += 1;
146 | 						if(_this.page_index > _this.page_count - 1){
147 | 							_this.page_index = 0;
148 | 						}
149 | 						_this.img_index = 0;
150 | 						var arr = _this.filterData(_this.page_index);
151 | 						_this.render(arr);
152 | 					});
153 | 				},	
154 | 
155 | 				//渲染页面方法
156 | 				render : function(arr){
157 | 					var _this = this;
158 | 					$(".imgList").empty();
159 | 					$.each(arr,function(i,item){
160 | 						if(_this.img_index == i){
161 | 							$("<li class='current'></li>").append($("<img>").attr("src",item)).appendTo(".imgList");
162 | 						}else{
163 | 							$("<li></li>").append($("<img>").attr("src",item)).appendTo(".imgList");
164 | 						}
165 | 					});
166 | 
167 | 					$("form span").text(this.page_index + 1 + "/" + this.page_count);
168 | 					var img_url = $(".imgList li").eq(this.img_index).find("img").attr('src');
169 | 					$(".left img").attr('src',img_url);
170 | 				},
171 | 				//过滤数据方法
172 | 				filterData : function(index){
173 | 					//0  0 - 7
174 | 					//1  8 - 15
175 | 					//2  16 - 23
176 | 					var arr = [];
177 | 					var _this = this;
178 | 					$.each(this.img_data,function(i,item){
179 | 						if(i >= index * _this.img_pageCount && i < (index + 1) * _this.img_pageCount){
180 | 							arr.push(item);
181 | 						}
182 | 					});
183 | 					return arr;
184 | 				}
185 | 			}
186 | 
187 | 			new Img();
188 | 				
189 | 		});
190 | 	</script>
191 | 
192 | </body>
193 | 
194 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | *{
  2 | 	margin: 0;
  3 | 	padding: 0;
  4 | 	list-style: none;
  5 | 	box-sizing: border-box;
  6 | }
  7 | .wrap{
  8 | 	width: 100%;
  9 | 	height: auto;
 10 | 	position: relative;
 11 | }
 12 | .tit{
 13 | 	width: 500px;
 14 | 	height: auto;
 15 | 	padding: 10px 10px;
 16 | 	border: 1px solid #ccc;
 17 | 	margin-left: 30px;
 18 | }
 19 | .img>img{
 20 | 	width: 100%;
 21 | 	height: 300px;
 22 | 	display: block;
 23 | }
 24 | .mark{
 25 | 	position: absolute;
 26 | 	left: 0;
 27 | 	top: 0;
 28 | 	width: 100%;
 29 | 	height: 1000px;
 30 | 	background: #E0E0E0B1;
 31 | 	display: none;
 32 | }
 33 | .mark_1{
 34 | 	width: 800px;
 35 | 	height: auto;
 36 | 	position: absolute;
 37 | 	left: 50%;
 38 | 	top: 50px;
 39 | 	margin-left: -400px;
 40 | 	border: 1px solid #ccc; 
 41 | 	padding-bottom: 10px;
 42 | }
 43 | .title{
 44 | 	width: 100%;
 45 | 	height: auto;
 46 | 	display: flex;
 47 | 	justify-content: space-between;
 48 | 	padding: 0 5px;
 49 | 	background: #E2E2E2;
 50 | }
 51 | .content{
 52 | 	width: 100%;
 53 | 	height: auto;
 54 | 	display: flex;
 55 | 	overflow: hidden;
 56 | }
 57 | .left{
 58 | 	flex: 8;
 59 | 	padding: 2px 40px;
 60 | 	height: 426px;
 61 | 	position: relative;
 62 | 	overflow: hidden;
 63 | 	display: flex;
 64 | }
 65 | .left>ol{
 66 | 	width: 100%;
 67 | 	height: auto;
 68 | 	position: absolute;
 69 | 	left: 0;
 70 | 	top: 50%;
 71 | 	display: flex;
 72 | 	justify-content: space-between;
 73 | 	padding: 0 5px;
 74 | }
 75 | .left>ol>li{
 76 | 	font-size: 50px;
 77 | 	font-family: '楷体';
 78 | }
 79 | .left>li>img{
 80 | 	width: 500px;
 81 | 	height: 426px;
 82 | 	display: block;
 83 | }
 84 | .right{
 85 | 	height: 426px;
 86 | 	flex: 2;
 87 | 	overflow: hidden;
 88 | 	position: relative;
 89 | }
 90 | .imgList{
 91 | 	width: 100%;
 92 | 	height: 300px;
 93 | 	overflow: hidden;
 94 | 	display: flex;
 95 | 	justify-content: center;
 96 | 
 97 | 	flex-wrap: wrap;
 98 | 	border: 1px solid #ccc;
 99 | }
100 | .imgList>li{
101 | 	width: 48%;
102 | 	padding: 5px 5px;
103 | }
104 | .imgList>li>img{
105 | 	width: 100%;
106 | 	height: 50px;
107 | 	display: block;
108 | }
109 | .right>form{
110 | 	position: absolute;
111 | 	left: 50%;
112 | 	margin-left: -28px;
113 | 	bottom: 40px;
114 | }
115 | .current{
116 | 	border: 1px solid red;
117 | 	height: 62px;
118 | }
119 | 


--------------------------------------------------------------------------------