ヘッダーの画像をスライドショーに

web研究会　2014.02.22 no3
topimageをスライドに変えてみよう
topimageをスライドショーに変えてみよう（
サンプル３のsliderのhtmlを活用して）
●HP作成で数枚の写真をスライドショーにするには
JavaScript（ジャバスクリプト）と言うものを<head>～</head>の中に追加します
（追加する場所は　17～18行目の<![endif]-->の下に）
以下はスライドショーを実行する　JavaScript
②
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script>
<script type="text/javascript">
※これらのJavaScriptはjsのフォルダーの中に収めてあります
$(function() {$('.slider').cycle({
fx:
'fade',
※スライダーをさせたい箇所のclassがslider
speed: 3000,
※
fx:
'fade', //フェード効果
timeout: 2000
speed: 3000, //フェードのスピード
});
timeout: 2000　//画像の表示時間
});
</script>
スライドショーのJavaScript終わり　ページサンプル2のheader部分のHTMLソースです
① ページの見出しタイトルを入れます
スライドショーの作成です。
画像は２枚以上です
<div class="topimage">の下に
インテリセンスで
新しいhtml
③
<div
class="slider"></div>
と記入して
その間に
の部分をコピペで用意した　写真の枚数分を貼る　<img alt="" src="img/画像top00.jpg">
<img alt="" src="img/画像top00.jpg">
<img alt="" src="img/画像top00.jpg">
<img alt="" src="img/画像top00.jpg">
ーーtopimageをスライドショーに変えた例ーー
④
リンクしたいnavを<ul class="clearfix">～</ul>　の中に　の部分をコピペで貼る
ーーーー例ーーーー続く
追加するhtml
詳細は次ページで
web研究会
web研究会　2014.02.22 no４
③のスライドショーの続きです
新しいHTMLを書いてみよう
オーサリングソフトweb4でsample3.htmlを読み込み下記の　で囲まれた部分のhtmlをコピペしましょう　又は
インテリセンスで
新しいhtml　<divclass="slider"></div>
と記入して　その間に利用する写真
をphotoのフォルダーから
ドラッグ、又はインテリ
センスで記入します
●新しいhtmlを追加しましたので　新しいCSSも追加します
追加する新しい　CSS
●削除する　CSS
cssを削除する
にはDeleteキー
で削除しますが
/*～*/で非表示
にもなります
新しいcssを作成する方法
を　覚えましょう！
これで
スライドショーはOK!
ちょっと一休みデス！
web研究会

Download Report