ウォンツケーキ店サイトにJQueryのsliderを導入する
1ヶ月作ってきた「クマヒゲの世界一やさしい」のケーキショップサイト。
ビルボード部分にJQueryのsliderを導入してみましょう。
【準備】
1)昨日制作の5枚のビルボード画像をjpgでそれぞれ保存。名前はmain_photo.jpg、main_photo2.jpg、main_photo3.jpg、main_photo4.jpg、main_photo5.jpg。imagesフォルダに格納。
2)直下にjsフォルダを作り、中にjquery.jsとeasySlider1.5.jsを格納します。
3)index.htmlのheadタグ内に、上記2つのjsへのリンクを貼ります。コードは以下の様になります。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.5.js"></script>
4)同じく、slider専用のcssのリンクも貼ります。
<link href="css/Scroll.css" rel="stylesheet" type="text/css" />
5)index.htmlのdiv id="header"の中のulの修了タグの下に以下のコードを加えます。
<div id="slider"> <ul> <li><a href="item.html"><img src="images/main_photo.jpg" alt="Css Template Preview" /></a></li> <li><a href="products.html" title=""><img src="images/main_photo2.jpg" alt="" /></a></li> <li><a href="item2.html" title=""><img src="images/main_photo5.jpg" alt="" /></a></li> <li><a href="products.html" title=""><img src="images/main_photo4.jpg" alt="" /></a></li> <li><a href="order.html" title=""><img src="images/main_photo3.jpg" alt="" /></a></li> </ul> </div>
※titleとaltには、ビルボード画像中の文章と同じ文章を入れておきます。
6)元々div id="header"の終了タグ直下にあった、main_photo.jpgのimgタグを削除します。
7)ローカルでクロスブラウザでの確認をします。
8)サイトに上げて、再度クロスブラウザ確認をします。