今まで各種のスライドショーを勉強しましたが、今回はトップページの写真を自然な形でふわっと切り替える方法で、サンプルはこちらで確認して下さい。
今回の私が準備したサンプルは超ワイドな(4.5：1)写真ですが、説明文もなく、さり気なく自然に入れ替わるというものです。
今回の写真の自動切り替えに関しては3タイプを実施して見ましたが、JSファイルやCSSファイルに複雑に設定しなければならないものもあり、今回は簡単な方を紹介します。
他のCSSと同名だと混乱しますので、今回使うCSSは新しく作ったフォルダーに写真と一緒に入れて名前のバッティングを防止するよう配慮しました。
以下は作成例で、赤い枠で囲んだ場所の写真をふわっと切り替えます。
今まで、自宅学習が5回ほど続いていますが、まずやってみて下さい、判らない事はご質問ください。
まず、関連するファイルを1つのzipにしましたので、ここからダウンロード願います。
|
