Javascript - Создание div появляется и исчезает

хорошо, поэтому у меня есть 8 уменьшенных изображений, и я хочу создать слайдер, когда я нажимаю на один из них. Я попробовал почти все, что я знаю, и вот это:Javascript - Создание div появляется и исчезает

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, когда я нажимаю на мои стрелки, он меняет мою картинку, но я должен сначала установить свой экран perty, чтобы «заблокировать», и я хочу установить его «нет», потому что я хочу, чтобы он отображался только тогда, когда я нажимаю на одно из миниатюр.

он работает с кнопкой закрытия, когда я нажимаю на него, исчезает slides_container div (я думаю, что я делаю что-то правильно!), Но я не могу заставить его появляться, когда я нажимаю на других ..:/любая помощь приветствуется.

источник

2013-04-22 Joelle Nader

, который должен быть скрыт изначально 'SlidesContainer' или' slides' –

Попробуйте

<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>

Update можно упростить сценарий много

<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>

источник

2013-04-22 05:18:56

Эта функция будет устанавливать свойство вашего экрана в противоположность тому, что оно сейчас (по сравнению с выключенным). Измените 'toggle' на свой идентификатор элемента, который вы хотите включить/выключить.

<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, указывая на другую функцию, которая переключает дополнительный идентификатор элемента. Надеюсь, что помогает.

источник

2016-04-15 02:55:29 polyphemus11

Javascript - Создание div появляется и исчезает

ответ

Смежные вопросы