cssスライドショーの解説
「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>
おまけ：javascriptを使った横スライドタイプ（※昔、公開していたタイプです）
cssスライドに比べ、枚数の追加が簡単で、画像ごとにリンクも貼れます。
※背景画像としては使えません。
※Macで編集すると原因不明の不具合が発生する場合があります。