teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

markdown記法に変更、コードを<code>にて表示

2020/07/14 11:40

投稿

paison
paison

スコア7

title CHANGED
File without changes
body CHANGED
@@ -2,18 +2,44 @@
2
2
  指定箇所に画像が表示されません。下記の通り、検証しましたが、画像は表示されませんでした。
3
3
  大変お手数ですが、ご教示のほど、宜しくお願いします。
4
4
 
5
- 確認したことは以下の通りです。
5
+ # 確認したことは以下の通りです。
6
6
 
7
7
  1. jQuery、bgswitcherの読み込みOK
8
8
  2. jQueryの記述OK
9
9
  3. jQuery内の画像のパスOK
10
10
 
11
+ ```ここに言語を入力
12
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
11
- ![イメージ説明](c9aa504e7e20686c1efb3e7ca65560d0.png)
13
+ <script src="js/jquery.bgswitcher.js"></script>
14
+
15
+ <script>
12
16
 
17
+ jQuery(function($) {
18
+ $('.top-image').bgSwitcher({
19
+ images: ['images/top_slide_01.jpg','images/top_slide_04.jpg'],
13
- 画像を表示させたい箇所のHTML
20
+ interval: 3000,
21
+ loop: true,
22
+ shuffle: true,
23
+ effect: "fade", // fade,blind,clip,slide,drop,hide
24
+ duration: 500,
25
+ easing: "swing" // linear,swing
26
+ });
27
+ });
28
+ </script>
29
+ ```
14
30
 
31
+ # 画像を表示させたい箇所のHTML
32
+ ```ここに言語を入力
15
- ![イメージ説明](ac1dd0d7dd87ef2cad94913150f6271d.png)
33
+ <div class="top-image"></div>
34
+ ```
16
35
 
17
- 画像を表示させたい箇所のCSS
36
+ # 画像を表示させたい箇所のCSS
18
37
 
38
+ ```ここに言語を入力
39
+ .top-image{
40
+ height:600px;
19
- ![イメージ説明](4252c11e3fd971d221b015e07bd16956.png)
41
+ background-position: center center;
42
+ background-size: cover;
43
+ background-repeat: no-repeat;
44
+ }
45
+ ```