■2016/01/13：即時関数で囲んで、グローバル変数を消しました。
■フェード１２■フェードで８方向ランダム移動リンク無■を改造しました。
８方向にランダムに移動しながら、フェードイン・フェードアウトで切り替わるスライドショーで、リンクとコメントが付けられます。
画像もリンクもコメントも JavaScript の中で記述できます。見本では５枚の内４枚がリンク付きです。
注意事項は改造元と違って、スライドショー開始時は
空白から始まるということです。
CSSの「#mn div」の「opacity:0;」を削除すると、開始時に最後の画像が表示されます。お好みで変更して下さい。
コメント部分の表示について、まずこのスライドショーの構造を説明します。
<div id="mn">
--------------------------------------------- CSSの指定は「#mn」。位置指定の基準。枠線指定用
<div>-------------------------------------------------------- CSSの指定は「#mn div」。移動部分ここから
<a href="リンク"><img src="スライド画像 ">
</a>------ CSSの指定は「#mn img」。
青字はリンク部分
<p>コメント</p>
------------------------------------------- CSSの指定は「#mn p」
</div>-------------------------------------------------------「#mn div」の終了。移動部分ここまで
</div>
-------------------------------------------------------「#mn」の終了
コメントがなければ、２個の「div」と「img」は、縦幅も横幅も同じ大きさですが、今回はコメントが入っているので、コメントの縦幅ほど２個の「div」の縦幅が「img」より大きくなっています。
JavaScript で移動させているのは、
赤字の「div」〜〜「/div」の部分です。
今回は、コメント用の領域を画像用とは別に指定しましたが、画像の上にコメントを載せることもできます。
その時は２個の「div」と「img」の縦幅と横幅は同じにして、CSSで「#mn p」の位置指定を変更して下さい。
原本は
教えて!goo の「babu_baboo さんの回答」から。