8 つのサムネイル画像があり、そのうちの 1 つをクリックするとスライダーが表示されるようにしたいと考えています。私が知っているほとんどすべてを試しましたが、ここにあります：
HTML:
<div id="divThumbnails2" class="thumbnails2">
<a href="#" id="Thumb5" >
<img src="images/thumbnail_5.png" width="55" height="66" alt="" class="floatleft" /></a>
<a href="#" id="Thumb6">
<img src="images/thumbnail_6.png" width="56" height="67" alt="" class="floatleft"
style="margin-left: 7px;" /></a>
<a href="#" id="Thumb7">
<img src="images/thumbnail_7.png" width="54" height="66" alt="" class="floatleft"
style="margin-left: 7px;" /></a>
<a href="#" id="Thumb8">
<img src="images/thumbnail_8.png" width="57" height="68" alt="" class="floatleft"
style="margin-left: 7px;" /></a>
</div>
<div id="divThumbnails" class="thumbnails">
<div id="Thumb1" class="floatleft" >
<a href="#">
<img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a>
</div>
<div id="Thumb2" class="floatleft" style="margin-left: 7px;" >
<a href="#">
<img src="images/thumbnail_2.png" width="56" height="66" alt="" /></a>
</div>
<div id="Thumb3" class="floatleft" style="margin-left: 7px;" >
<a href="#">
<img src="images/thumbnail_3.png" width="54" height="66" alt="" /></a>
</div>
<div class="floatleft" style="margin-left: 7px;" id="Thumb4">
<a href="#">
<img src="images/thumbnail_4.png" width="57" height="68" alt="" /></a>
</div>
</div>
そしてスライド：
<div id="slides">
<div class="slides_container" id="SlidesContainer">
<a href="#"><img src="images/slides_1.png" width="408" height="266" alt="" /></a>
<a href="#"><img src="images/slides_2.png" width="408" height="272" alt="" /></a>
<a href="#"><img src="images/slides_3.png" width="408" height="275" alt="" /></a>
</div>
<a class="prev" href="#"><img width="28" height="27" alt="Arrow Prev" src="images/slides_left_arrow.png"/></a>
<a class="next" href="#"><img width="28" height="27" alt="Arrow Next" src="images/slide_arrow_right.png"/></a>
<div class="close_btn" id="Btn_Close"><a href="#"><img src="images/slide_close_btn.png" width="28" height="27" alt="Close" /></a></div>
</div>
JavaScript:
<script type="text/javascript">
var close = document.getElementById('Btn_Close');
var slides = document.getElementById('slides');
close.onclick = function () {
slides.style.display = "none";
};
</script>
<script type="text/javascript">
var thumb1 = document.getElementById('Thumb1');
var slides = document.getElementById('slides');
thumb1.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb2 = document.getElementById('Thumb2');
var slides = document.getElementById('slides');
thumb2.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb3 = document.getElementById('Thumb3');
var slides = document.getElementById('slides');
thumb3.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb4 = document.getElementById('Thumb4');
var slides = document.getElementById('slides');
thumb4.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb5 = document.getElementById('Thumb5');
var slides = document.getElementById('slides');
thumb5.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb6 = document.getElementById('Thumb6');
var slides = document.getElementById('slides');
thumb6.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb7 = document.getElementById('Thumb7');
var slides = document.getElementById('slides');
thumb7.onclick = function () {
slides.style.display = "block";
};
</script>
<script type="text/javascript">
var thumb8 = document.getElementById('Thumb8');
var slides = document.getElementById('slides');
thumb8.onclick = function () {
slides.style.display = "block";
};
</script>
矢印をクリックすると、slides_container ですべて問題なく画像が変更されますが、最初にその表示プロパティを「ブロック」に設定する必要があり、「none」に設定したいのは、いずれかをクリックしたときにのみ表示されるようにするためです。サムネイル画像。
閉じるボタンをクリックするとslides_containerdivが消えます（私は何か正しいことをしていると思います）が、他のボタンをクリックすると表示されないようです。どんな助けでも大歓迎です。