レイアウトが崩れてしまう為
このcssを

#stage {
position : relative;
max-width : 600px;
margin : 0 auto;
background : #ddd;
}
.pic {
position : absolute;
}
.pic img {
width : 100%;
height : auto;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;

下記の様に記述したのですが、これが原因でしょうか？

#stage {
position : relative;
max-width : 1000px;
margin-left : 0 auto;
background : #ddd;
height : 400px;

.pic {
position : absolute;
width : 1000px;
height : 400px;
}

.pic img {
width : 1000px;
height : 400px;
opacity : 0;
-moz-animation : imgTrans 40s infinite;
-webkit-animation : imgTrans 40s ease-in infinite;
animation : imgTrans 40s infinite;
}
他の部分のcssとhtmlは一緒です。

はじめまして、いつも参考にさせて頂いてます。

早速質問なのですが、
このスライドショーを別々のページに置こうと考えているのですが、
表示するスライドの枚数、遷移時間を別々に設定しようとしてつまづいております。
cssの記述をどのようにすればよろしいでしょうか？
また、特定の1枚だけを長く表示させることは可能でしょうか？
ご教示頂けると嬉しいです、よろしくお願いいたします。

すみません！

pic {
position: absolute;
}

が抜けていたみたいで、できました！
本当にありがとうございました。

次はサムネイル用ロールオーバーに挑戦したく思います。

先日フェイドイン型フォトギャラリー（レスポンシブ）で質問させていただいた。abdです。
早速ご質問にご回答いただき感謝しております。

#stage2の動作が確認できません。(htmlの.pic2を.picにすると動作しますが#stageと同タイミングになるため写真が消えている時間が長くなります）
イメージは#stageで５枚を２５秒で繰り返し、#stage2は２枚を16秒で表示したいと考えております。

何度も試行錯誤をしてみたのですが、解決できずに困っています。ご教授いただけませんでしょうか？

htmlは以下の通りです。

cssは以下の通りです。
#stage {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 25s infinite;
-webkit-animation: imgTrans 25s ease-in infinite;
animation: imgTrans 25s infinite;
left:10%;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#photo3 img {
-moz-animation-delay: 10s;
-webkit-animation-delay: 10s;
animation-delay: 10s;
}
#photo4 img{
-moz-animation-delay: 15s;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
#photo5 img {
-moz-animation-delay: 20s;
-webkit-animation-delay: 20s;
animation-delay: 20s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
—————————————————————————-
#stage2 {
position: relative;
max-width:600px;
margin: 0 auto;
background:#ddd;
}
.pic2 {
position: absolute;
}
.pic2 img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans2 16s infinite;
-webkit-animation: imgTrans2 16s ease-in infinite;
animation: imgTrans2 16s infinite;
left:10%;
}
#photo21 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo22 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;

@-webkit-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans2 {
0% { opacity:0; }
15% { opacity:1; }
45% { opacity:1; }
60% { opacity:0; }
100% { opacity:0; }
}

はじめまして。ホームページトップにスライドを設置したく参考にさせていただいております。
スライドショーの下に余白300pix位の余白ができてしまうのですが、詰める方法はありますでしょうか。
なかなか解決できないため質問いたしました。よろしくお願いいたします。

初めまして、素人のものです。
会社のサイトを作成中で、リンク付きフェイドインアウトをTOPに入れたいと思っています。
同じ質問の方もおられたので参考にし編集をしたのですが
どうしても最後の画像に貼ったリンク先に飛んでしまいます。
同じ質問で申し訳ないのですが、みていただければと思います。

画像3枚を繰り返し表示させたいのは以前の質問でクリアできました。

・それぞれにリンクを貼りたい
・UPすると、画像の真ん中上部に〇〇〇〇〇が表示されるのを消したい
・下に●〇〇と今何枚目の画像が表示されているのかが分かる様にしたい

以上3点を追加したいです。
よろしくお願いいたします。

———————————-

#stage {
position: relative;
max-width:1250px;
max-hight:622px;
margin: 0 auto;
background:#ffffff;
}
.pic {
position: absolute;
}
.pic img {
width: 100%;
height: auto;
opacity:0;
-moz-animation: imgTrans 24s infinite;
-webkit-animation: imgTrans 24s ease-in infinite;
animation: imgTrans 24s infinite;
}
#photo1 img {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#photo2 img {
-moz-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#photo3 img {
-moz-animation-delay: 16s;
-webkit-animation-delay: 16s;
animation-delay: 16s;
}

@-webkit-keyframes imgTrans {
0% { opacity:0; z-index:10; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; z-index:10; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; z-index:10; }
23% { opacity:1;}
33% { opacity:1; }
43% { opacity:0; }
100% { opacity:0; }
}

～～～～body～～～～～

<a href="URL1" rel="nofollow"></a>
<a href="URL2" rel="nofollow"></a>
<a href="URL3" rel="nofollow"></a>