私はコーディングに比較的慣れておらず、非常に単純なスライドショーを作成しようとしていますが、html の画像に div id を使用するのではなく、JavaScript を css の画像 URL に「リンク」させたいだけです。よく分からないのでこれでいいのかな？
基本的に、私の Web サイトには一連の画像サムネイルがあり、現在クリックすると拡大されます。つまり、縦方向のアコーディオン機能です。アコーディオンは独自の div id であり、アコーディオンに関係するすべてのことは div クラスの「コンテナー」内に保持され、特に画像は div クラスの「ラッパー」内に保持されます。すべてのテキストとリンクは html の本文内にあり、画像はすべて css にあります。
HTMLで画像スライドショーを作成する方法（画像を回転させるだけで、クリック可能な画像/リンクはありません）を理解しており、CSSからHTMLに画像を移動するとスライドショーが機能します。ただし、これを行うと、画像はアコーディオンの「ルール」内になくなります。したがって、HTML に移動した画像は回転しますが、テキストに重なっており、アコーディオンの残りの部分のような画像スライスではなくなります。css を使用してページ上でスライドショー画像を移動できますが、アコーディオン内のテキストやその他の機能と重なってしまいます。
問題が画像の配置場所に関連しているかどうかを確認するために、html 内の画像を本文内の別の場所に移動しようとしましたが、これで問題は解決しませんでした。
アコーディオン機能も維持されるように、JavaScriptを使用してCSSに画像を保持する方法はありますか? 私はこれで立ち往生しており、次に何を試すべきかわかりません。ありがとう。
<body>
<div class="container">
<h1 class="va-name"><a href="avatest.html"> Amy Danielsons</a> </h1>
<h2 class="va-contact">Contact</h2>
<h3 class="va-resume"><a href="resume.html">Resume</a>
<h4 class="va-about">About</h4>
<h5 class="va-port"><a href="#">Online Portfolio</h5>
<h6 class="va-hatch"><img src="images/pattern.png" width="10" height="10" alt="hatch" />
</h6>
<div id="va-accordion" class="va-container">
<div class="va-nav">
<span class="va-nav-prev">Previous</span>
<span class="va-nav-next">Next</span>
</div>
<div class="va-wrapper">
<div class="va-slice va-slice-1">
<!--slider 1 images -->
<div>
<img src="images/testa.jpg" />
</div>
<div>
<img src="images/testb.jpg" />
</div>
<div>
<img src="images/testc.jpg" />
</div>
<h3 class="va-title">Cranbrook</h3>
<div class="va-content">
<p>Paragraph Title</p>
<p2>dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p2>
</div>
</div>
</div>
(以下の css 部分: 最初の画像スライスの URL を削除し、画像を移動 (さらに 2 つの画像を追加) して上記の html に移動した場所を確認できます)
}
.va-slice-1{
background:#FFF
}
.va-slice-2{
background:#FFF url(../images/2d/liz.jpg) no-repeat center center;
}
.va-slice-3{
background:#FFF url(../images/2d/oldcar.jpg) no-repeat center center;
}