Help us understand the problem. What is going on with this article?

HTMLにslideshow.jsを組み込む方法

今回は、Websiteにslideshowを導入して、写真データが代わる代わる投影していく方法を纏めてみました。

当然スライドショーを動かすためには、 slideshow.js ファイルを js フォルダ内に置いてあることが前提になります。

次のslideshowプラグイン情報を参照してください。
使えそうなjQueryのSlideshowプラグイン: Slides

ではNAVの下にスライドショーを組み込む方法です。

img src="images/画像データ名" と、 alt="データ名" と、 class="データ名" などのデータ名は、任意のものであります。データの階層を間違いないようにしましょう。

base-graphic.html
<nav>
    <ul>
        <li>
            ..........
        </li>
    </ul>
</nav>

<div id="graphic">
    <ul>
        <li class="now"><img src="images/slide1.jpg" alt="こだわりの空間" class="image1"></li>
        <li><img src="images/slide2.jpg" alt="チャペル" class="image2"></li>
        <li><img src="images/slide3.jpg" alt="ありがとう" class="image3"></li>
    </ul>
</div>

html内の slideshow.js の呼び出し部分(=script)は基本的に head 内、 body 内のどこにでも置くことが出来ますが、コンピュータは上から下に言語を読み込む仕組みゆえに、 /footer の下に書き込むのが普通になっております。その方が、 Website の読み込みが速く進みます。

slideshow.js
...
<footer>
...
</footer>
<script src="js/slideshow.js"></script>
</body>
</html>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away