cssスライドショーの解説

当ページは「slide.css」を使ったタイプのスライドショー解説です。
cssフォルダに「slide.css」というファイルが入っておらず、jsフォルダに「slide_simple_pack.js」がある場合はこちらのタイプではありませんのでご注意下さい。

「slide0」の行がないタイプ

通常のフェードイン・アウトです。
スライドショーの最後に一旦完全にフェードアウト(空白)になるタイプです。

例:
<aside id="mainimg">
<img src="images/1.jpg" alt="" class="slide1">
<img src="images/2.jpg" alt="" class="slide2">
<img src="images/3.jpg" alt="" class="slide3">
</aside>

詳しい解説はこちら

「slide0」の行があるタイプ

通常のフェードイン・アウトです。
上のスライドショーと構成は同じですが、最後の余白時間がないタイプです。

例:
<aside id="mainimg">
<img src="images/0.jpg" alt="" class="slide0">
<img src="images/1.jpg" alt="" class="slide1">
<img src="images/2.jpg" alt="" class="slide2">
<img src="images/3.jpg" alt="" class="slide3">
</aside>

※「0.jpg」→「1.jpg」のタイプもあります。

詳しい解説はこちら

imgタグを使っていないタイプ

通常のフェードイン・アウトです。
cssの背景画像を使ったタイプ。

例:
<aside id="mainimg">
<div class="slide0">slide0</div>
<div class="slide1">slide1</div>
<div class="slide2">slide2</div>
<div class="slide3">slide3</div>
</aside>

詳しい解説はこちら

imgタグを使っていないタイプで、横スライドタイプ

右側からフェードインし、中央で停止、その後左側にフェードアウトします。画像にリンク設定も可。
cssの背景画像を使ったタイプ。

例:
<aside id="mainimg">
<div class="slide1">slide1</div>
<div class="slide2">slide2</div>
<div class="slide3">slide3</div>
</aside>

詳しい解説はこちら

imgタグを使った横スライドタイプ

右側からフェードインし、中央で停止、その後左側にフェードアウトします。画像にリンク設定も可。
上の背景画像と同じ動きですが、html側に実際に画像を配置したタイプです。

例:
<!--スライドショー-->
<aside id="mainimg">
<img src="images/0.png" alt="" class="slide0">
<img src="images/1.jpg" alt="" class="slide1">
<img src="images/2.jpg" alt="" class="slide2">
<img src="images/3.jpg" alt="" class="slide3">
</aside>

詳しい解説はこちら