teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スライドショーを設置したい。

編集履歴

質問編集履歴

1

画像リンクを付けた。

2018/01/29 05:05

投稿

kikyou_
kikyou_

スコア5

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
- ### 前提・実現したいこと
1
+ ![イメージ説明]### 前提・実現したいこと
2
+
3
+ ![イメージ説明]
4
+
5
+
2
6
 
3
7
 
4
8
 
@@ -6,6 +10,26 @@
6
10
 
7
11
  現在画像の通り
8
12
 
13
+
14
+
15
+ [作った画像１](https://gyazo.com/1d5438d19cf93e689eb9788274260111)
16
+
17
+ [作った画像2](https://gyazo.com/60798f7ed7940e4eb1bbeb7cc32f603e)
18
+
19
+
20
+
21
+ 画像１のサイドバーの隣に作った画像２を設置したい。
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
9
33
  ■■な機能を実装中に以下のエラーメッセージが発生しました。
10
34
 
11
35
 
@@ -30,7 +54,329 @@
30
54
 
31
55
  ```
32
56
 
57
+ ```jquery
58
+
59
+
60
+
61
+ <!-- 画像スライドスクリプト-->
62
+
63
+
64
+
65
+ <script>
66
+
67
+ $(function(){
68
+
69
+ $(window).load(function(){
70
+
71
+ var setWrap = $('.slideShow'),
72
+
73
+ setMainView = $('.mainView'),
74
+
75
+ setThumbNail = $('.thumbNail'),
76
+
77
+ setMaxWidth = 800,
78
+
79
+ setMinWidth = 320,
80
+
81
+ thumbNum = 6,
82
+
83
+ thumbOpc = 0.5,
84
+
85
+ fadeTime = 1000,
86
+
87
+ delayTime = 5000,
88
+
89
+ sideNavi = 'on', // 'on' or 'off'
90
+
91
+ autoPlay = 'on'; // 'on' or 'off'
92
+
93
+
94
+
95
+ setWrap.each(function(){
96
+
97
+ var thisObj = $(this),
98
+
99
+ childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'),
100
+
101
+ childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last');
102
+
103
+
104
+
105
+ thisObj.css({width:setMaxWidth,display:'block'});
106
+
107
+
108
+
109
+ mainLi.each(function(i){
110
+
111
+ $(this).attr('class','view' + (i + 1).toString()).css({zIndex:'98',opacity:'0'});
112
+
113
+ mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
114
+
115
+ });
116
+
117
+
118
+
119
+ thumbLi.click(function(){
120
+
121
+ if(autoPlay == 'on'){clearInterval(setTimer);}
122
+
123
+
124
+
125
+ var connectCont = thumbLi.index(this);
126
+
127
+ var showCont = connectCont+1;
128
+
129
+ mainUl.find('.view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'});});
130
+
131
+ mainUl.find('.view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'});});
132
+
133
+
134
+
135
+ $(this).addClass('active');
136
+
137
+ $(this).siblings().removeClass('active');
138
+
139
+
140
+
141
+ if(autoPlay == 'on'){timer();}
142
+
143
+
144
+
145
+ });
146
+
147
+ thumbLi.css({opacity:thumbOpc});
148
+
149
+ thumbLiFst.addClass('active');
150
+
151
+
152
+
153
+ // メイン画像をベースにエリアの幅と高さを設定
154
+
155
+ var mainLiImg = mainLi.find('img'),
156
+
157
+ baseWidth = mainLiImg.width(),
158
+
159
+ baseHeight = mainLiImg.height();
160
+
161
+
162
+
163
+ // レスポンシブ動作メイン
164
+
165
+ imgSize();
166
+
167
+ function imgSize(){
168
+
169
+ var windowWidth = parseInt($(window).width());
170
+
171
+ if(windowWidth >= setMaxWidth) {
172
+
173
+ thisObj.css({width:setMaxWidth});
174
+
175
+ childMain.css({width:baseWidth,height:baseHeight});
176
+
177
+ mainUl.css({width:baseWidth,height:baseHeight});
178
+
179
+ mainLi.css({width:baseWidth,height:baseHeight});
180
+
181
+ thumbLi.css({width:((setMaxWidth)/(thumbNum))});
182
+
183
+ } else if(windowWidth < setMaxWidth) {
184
+
185
+ if(windowWidth >= setMinWidth) {
186
+
187
+ thisObj.css({width:'100%'});
188
+
189
+ childMain.css({width:'100%'});
190
+
191
+ mainUl.css({width:'100%'});
192
+
193
+ mainLi.css({width:'100%'});
194
+
195
+ } else if(windowWidth < setMinWidth) {
196
+
197
+ thisObj.css({width:setMinWidth});
198
+
199
+ childMain.css({width:setMinWidth});
200
+
201
+ mainUl.css({width:setMinWidth});
202
+
203
+ mainLi.css({width:setMinWidth});
204
+
205
+ }
206
+
207
+ var reHeight = mainLiImg.height();
208
+
209
+ childMain.css({height:reHeight});
210
+
211
+ mainUl.css({height:reHeight});
212
+
213
+ mainLi.css({height:reHeight});
214
+
215
+
216
+
217
+ var reWidth = setThumbNail.width();
218
+
219
+ thumbLi.css({width:((reWidth)/(thumbNum))});
220
+
221
+ }
222
+
223
+ }
224
+
225
+ $(window).resize(function(){imgSize();});
226
+
227
+ imgSize();
228
+
229
+
230
+
231
+ // サムネイルマウスオーバー
232
+
233
+ var agent = navigator.userAgent;
234
+
33
- file:///C:/Users/momo/Documents/%E3%82%B3%E3%82%B3%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9/html17/index.html
235
+ if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
236
+
237
+ thumbLi.hover(function(){
238
+
239
+ $(this).stop().animate({opacity:'1'},200);
240
+
241
+ },function(){
242
+
243
+ $(this).stop().animate({opacity:thumbOpc},200);
244
+
245
+ });
246
+
247
+ }
248
+
249
+
250
+
251
+ // ボタン移動動作
252
+
253
+ function switchNext(){
254
+
255
+ var setActive = thumbUl.find('.active');
256
+
257
+ setActive.each(function(){
258
+
259
+ var listLengh = thumbLi.length,
260
+
261
+ listIndex = thumbLi.index(this),
262
+
263
+ listCount = listIndex+1;
264
+
265
+
266
+
267
+ if(listLengh == listCount){
268
+
269
+ thumbLiFst.click();
270
+
271
+ } else {
272
+
273
+ $(this).next('li').click();
274
+
275
+ }
276
+
277
+ });
278
+
279
+ }
280
+
281
+ function switchPrev(){
282
+
283
+ var setActive = thumbUl.find('.active');
284
+
285
+ setActive.each(function(){
286
+
287
+ var listLengh = thumbLi.length,
288
+
289
+ listIndex = thumbLi.index(this),
290
+
291
+ listCount = listIndex+1;
292
+
293
+
294
+
295
+ if(1 == listCount){
296
+
297
+ thumbLiLst.click();
298
+
299
+ } else {
300
+
301
+ $(this).prev('li').click();
302
+
303
+ }
304
+
305
+ });
306
+
307
+ }
308
+
309
+
310
+
311
+ // サイドナビボタン（有り無し）
312
+
313
+ if(sideNavi == 'on'){
314
+
315
+ childMain.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
316
+
317
+ var btnPrev = thisObj.find('.btnPrev'),btnNext = thisObj.find('.btnNext'),btnPrevNext = thisObj.find('.btnPrev,.btnNext');
318
+
319
+ if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
320
+
321
+ btnPrevNext.css({opacity:thumbOpc}).hover(function(){
322
+
323
+ $(this).stop().animate({opacity:'0.9'},200);
324
+
325
+ },function(){
326
+
327
+ $(this).stop().animate({opacity:thumbOpc},200);
328
+
329
+ });
330
+
331
+ } else {
332
+
333
+ btnPrevNext.css({opacity:thumbOpc});
334
+
335
+ }
336
+
337
+ btnPrev.click(function(){switchPrev();});
338
+
339
+ btnNext.click(function(){switchNext();});
340
+
341
+ }
342
+
343
+
344
+
345
+ // 自動再生（有り無し）
346
+
347
+ if(autoPlay == 'on'){
348
+
349
+ function timer(){
350
+
351
+ setTimer = setInterval(function(){
352
+
353
+ switchNext();
354
+
355
+ },delayTime);
356
+
357
+ }
358
+
359
+ timer();
360
+
361
+ }
362
+
363
+ });
364
+
365
+ });
366
+
367
+ });
368
+
369
+ </script>
370
+
371
+
372
+
373
+
374
+
375
+ <!-- 画像スライドスクリプトend-->
376
+
377
+
378
+
379
+ ```
34
380
 
35
381
 
36
382
 
@@ -102,4 +448,4 @@
102
448
 
103
449
  <!--スライドend-->
104
450
 
105
- ```
451
+ ``````html