回答編集履歴

2

修正

2018/04/08 15:05

投稿

退会済みユーザー
test CHANGED
@@ -264,7 +264,7 @@
264
264
 
265
265
  var src = target_image.prop('src');
266
266
 
267
- $("#response").attr("src", src);
267
+ $("#response").prop("src", src);
268
268
 
269
269
  }
270
270
 

1

追記

2018/04/08 15:05

投稿

退会済みユーザー
test CHANGED
@@ -141,3 +141,139 @@
141
141
  </html>
142
142
 
143
143
  ```
144
+
145
+
146
+
147
+ ---
148
+
149
+
150
+
151
+ ```html
152
+
153
+ <!DOCTYPE HTML>
154
+
155
+ <html lang="ja">
156
+
157
+ <head>
158
+
159
+ <meta charset="UTF-8">
160
+
161
+ <title>sample</title>
162
+
163
+ <style type="text/css">
164
+
165
+ #box img {
166
+
167
+ width: 200px;
168
+
169
+ }
170
+
171
+ </style>
172
+
173
+ </head>
174
+
175
+ <body>
176
+
177
+ <div id="box">
178
+
179
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=1" alt="1" />
180
+
181
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=2" alt="2" />
182
+
183
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=3" alt="3" />
184
+
185
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=4" alt="4" />
186
+
187
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=5" alt="5" />
188
+
189
+ <div>
190
+
191
+ <button id="prev" type="button">PREV</button>
192
+
193
+ <button id='next' type="button">NEXT</button>
194
+
195
+ </div>
196
+
197
+ </div>
198
+
199
+ <div>
200
+
201
+ <img id="response" src="" alt="" />
202
+
203
+ </div>
204
+
205
+ <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
206
+
207
+ <script type="text/javascript">
208
+
209
+ $(function () {
210
+
211
+ var images = $("#box img");
212
+
213
+ var current_index = 0;
214
+
215
+ $("#box img").each(function (i) {
216
+
217
+ $(this).data('index', i);
218
+
219
+ });
220
+
221
+ $("#box img").on('click', function (e) {
222
+
223
+ current_index = $(this).data('index');
224
+
225
+ expand(current_index);
226
+
227
+ });
228
+
229
+ $("#prev").on('click', function () {
230
+
231
+ current_index--;
232
+
233
+ if (current_index < 0) {
234
+
235
+ current_index = images.length - 1;
236
+
237
+ }
238
+
239
+ expand(current_index);
240
+
241
+ });
242
+
243
+ $("#next").on('click', function () {
244
+
245
+ current_index++;
246
+
247
+ expand(current_index % images.length);
248
+
249
+ });
250
+
251
+
252
+
253
+ /**
254
+
255
+ * 拡大処理
256
+
257
+ * @returns void
258
+
259
+ */
260
+
261
+ function expand(index) {
262
+
263
+ var target_image = images.eq(index);
264
+
265
+ var src = target_image.prop('src');
266
+
267
+ $("#response").attr("src", src);
268
+
269
+ }
270
+
271
+ });
272
+
273
+ </script>
274
+
275
+ </body>
276
+
277
+ </html>
278
+
279
+ ```