コピペで使える！フェードアウトで画像切り替えするカルーセル（CSS+Javascript）【軽量＆シンプル】

普通のカルーセルは様々なサイトで使われて誰も興味を示さなくなってきています。
他とは違うカルーセルを表示すれば少しは興味を示してくれる可能性が高くなります。
JavascriptとCSSでランダムに回転した画像を重ねて表示しフェードアウトで切り替えるカルーセル(mam_fadeout_carousel.js) を使うと普通のカルーセルとは違い、興味を示してくれるかもしれません。

mam_fadeout_carousel.jsの特徴

シンプルなJavaScriptクラスで動作
ランダムに画像を回転させながらフェードアウト切り替え
軽量で汎用性が高い

mam_fadeout_carousel.jsの使い方

以下ボタンを押してmam_fadeout_carousel.jsをダウンロードします。
mam_fadeout_carousel.js(17KB)ダウンロード
mam_fadeout_carousel.jsを使いたいファイルに相対又は絶対パスでmam_fadeout_carousel.jsを指定します。
使用したいDIVタグのclassに"mamfadeinout"を指定します。aタグのリンク先や画像を好きなものに変更します。
```
  <script src="./js/mam_fadeout_carousel.js"></script>
  <div class="mamfadeinout">
    <a href="1.html"><img src="fio1.jpg"></a>
  </div>
```

フェードアウトで切り替え！カルーセルの使用例（CSS+Javascript）

画像は幅：縦＝４：１程度の横幅の長い画像を使用してください。

<script src="./js/mam_fadeout_carousel.js"></script>
<div id="mamfadeinout">
  <a href="/javascript/three_js_material.html" target="_blank"><img src="./imgs/fc01.png"></a>
  <a href="/javascript/three_js_geometry.html" target="_blank"><img src="./imgs/fc02.png"></a>
  <a href="/javascript/three_js_baseball.html" target="_blank"><img src="./imgs/fc03.png"></a>
  <a href="/javascript/css_ul_li.html" target="_blank"><img src="./imgs/fc04.png"></a>
  <a href="/javascript/css_nav_horizontal_menu.html" target="_blank"><img src="./imgs/fc05.png"></a>
  <a href="/javascript/css_toggle_switch.html" target="_blank"><img src="./imgs/fc06.png"></a>
</div>