好吧所以我有8张缩略图,我想在点击其中一张时出现一个滑块。我几乎尝试了所有我知道的东西,现在是:
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>
一切都很好用slide_container当我点击我的箭头它改变了我的图片,但我必须首先将其显示属性设置为“阻止”,我想将其设置为“无”,因为我希望它只在我点击时出现其中一张缩略图。
当我点击它时,它与关闭按钮一起工作slide_container div消失了(我想我正在做正确的事!)但是当我点击其他人时我似乎无法让它出现..:/感谢任何帮助。
答案 0 :(得分:2)
此功能会将您的显示属性设置为与当前相反的格式(开启与关闭)。将“切换”更改为您要打开/关闭的元素ID。
<script type="text/javascript">
function toggle(){
var off=document.getElementById('toggle');
if (off.style.display == "none") {
off.style.display = "block";
} else {
off.style.display = "none";
}
}
</script>
最后,如果要切换更多元素,可以随时创建其他变量。如果你想要更多的“开关”,那么用另一个onclick动作创建另一个元素,指向另一个切换附加元素id的函数。 希望有所帮助。
答案 1 :(得分:1)
尝试
<div id="slides" style="display: none"> <!-- set display to none -->
<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>
<强>更新强> 您可以大量简化脚本
<script type="text/javascript">
var slides = document.getElementById('slides');
var close = document.getElementById('Btn_Close');
close.onclick = function () {
slides.style.display = "none";
};
function showSlide(){
slides.style.display = "block";
}
向onclick
元素添加thumb
个事件:
<div id="Thumb1" class="floatleft" onclick="showSlide()">
<a href="#">
<img src="images/thumbnail_1.png" width="54" height="65" alt=""/></a>
</div>