Jquery div slideshow скрывает дочерние элементы

Question

Я пытаюсь следовать коду Jquery для слайд-шоу Div. В принципе, я хочу показать div1, скрывая div2 (и наоборот) со всеми дочерними элементами видимого div, чтобы быть видимым.

Код ниже показывает только первые дочерние элементы видимого div и скрывает все дочерние элементы, а затем отображает дочерние элементы при скрытии the first.

Может кто-нибудь, пожалуйста, помогите выяснить, как показать div и его дочерние элементы, скрывая другого родного брата. div s? Как слайд-шоу.

Кроме того, было бы здорово показать только те контейнеры div s в слайд-шоу, где хотя бы один элемент изображения имеет URL-адрес src (т. Е. Не установлен в null или "").

Благодаря DKJ

HTML

<div id="slideshow" class="site-content" role="main"> 
      <div id="div1_wrapper" class="slides"> 
       <div id="div1_bg"> 
        <img src="<?php echo get_option('div1_bg'); ?>" /> 
       </div> 

       <div id="div1_productimg"> 
        <img src="<?php echo get_option('div1_productimg'); ?>" /> 
       </div> 
      </div> 

      <div id="div2_wrapper" class="slides"> 
       <div id="div2_bg"> 
        <img src="<?php echo get_option('div2_bg'); ?>" /> 
       </div> 

       <div id="div2_productimg"> 
        <img src="<?php echo get_option('div2_productimg'); ?>" /> 
       </div> 
      </div> 
     </div> 

Jquery

<script> 
   $(function() { 
       $('.slideshow div').hide(); // hide all slides 
             $('.slideshow div:first-child').show(); // show first slide 
                setInterval(function() { 
                   $('.slideshow div:first-child').fadeOut(500) 
                        .next('div').fadeIn(1000) 
                        .end().appendTo('.slideshow'); 
                }, 
        3000); // slide duration 
     });     
</script> 

Answer 1

После прочтения ваших комментариев к моему предыдущему ответу, вот еще одна версии, которая должна быть ближе к вашему требованию:

1. Удалить все обертки без какого-либо надлежащего образа в нем (и я также удалил тех, изображения от действительных оберток, которые не имеют источника, данный избежать «отсутствуют изображение» изображения)
2. Скрыть все обертки и показать только первый один
3. цикл всех оберток, скрытие/отображение содержимого на все обертках

---

Новый код

HTML код (без изменения структуры, 2 дивы и некоторые src теги с пустым содержимым добавлено):

<div id="slideshow" class="site-content" role="main"> 
    <div id="div1_wrapper" class="slides"> 
     <div id="div1_bg"> 
      <img src="<?php echo get_option('div1_bg'); ?>" /> 
     </div> 
     <div id="div1_productimg"> 
      <img src="<?php echo get_option('div1_productimg'); ?>" /> 
     </div> 
    </div> 
    <div id="div2_wrapper" class="slides"> 
     <div id="div2_bg"> 
      <img src="" alt="2 empty pics" /> 
     </div> 
     <div id="div2_productimg"> 
      <img src="" alt="2 empty pics" /> 
     </div> 
    </div> 
    <div id="div3_wrapper" class="slides"> 
     <div id="div3_bg"> 
      <img src="<?php echo get_option('div3_bg'); ?>" /> 
     </div> 
     <div id="div3_productimg"> 
      <img src="<?php echo get_option('div3_productimg'); ?>" /> 
     </div> 
    </div> 
    <div id="div4_wrapper" class="slides"> 
     <div id="div4_bg"> 
      <img src="" alt="1 empty pic" /> 
     </div> 
     <div id="div4_productimg"> 
      <img src="<?php echo get_option('div4_productimg'); ?>" /> 
     </div> 
    </div> 
</div> 

JS код:

$().ready(function() { 
    var wrappers= $('.slides'); 
    for(var i=0;i<wrappers.length;i++) { 
     if($(wrappers[i]).find('img[src!=""]').length == 0) {    
      // remove wrappers that do not contain any image with source 
      $(wrappers[i]).remove(); 
     } else {    
      // wrapper should not be removed, but remove all images without any source 
      $(wrappers[i]).find('img[src=""]').remove(); 
     } 
    } 
    // create the slide show and reload the slides, this time only the ones with proper images 
    window.slideShow= {}; 
    slideShow.slides= $('.slides'); 
    slideShow.numSlides= slideShow.slides.length; 
    slideShow.activeSlide= 0; 
    slideShow.slides.hide(); 
    $(slideShow.slides[0]).show(); 

    window.setInterval(function() { 
     $(slideShow.slides[slideShow.activeSlide]).hide('fadein'); 
     slideShow.activeSlide= slideShow.activeSlide+1 == slideShow.numSlides ? 0 : slideShow.activeSlide+1; 
     $(slideShow.slides[slideShow.activeSlide]).show('fadein'); 
    }, 3000); 
}); 

И another fiddle, чтобы показать измененную функциональность.

Answer 2

Я думаю, что это может помочь вам увидеть, у меня есть несколько различных хаков для решения, у вас есть своя.

Посмотрите, если это вам поможет.

DEMO

$("#div2_wrapper").fadeOut(0); 
 

 
$(document).ready(function(){ 
 
    
 
\t var divslider = 1; 
 
\t function jsslider() 
 
\t {  
 
\t \t if(divslider == 1) 
 
\t \t { 
 
\t \t \t $("#div1_wrapper").fadeOut(500); 
 
\t \t \t $("#div2_wrapper").fadeIn(400); 
 
\t \t \t divslider = 2; 
 
\t \t \t return; 
 
\t \t } 
 
\t \t if(divslider == 2) 
 
\t \t { 
 
\t \t \t $("#div2_wrapper").fadeOut(500); 
 
\t \t \t $("#div1_wrapper").fadeIn(400); 
 
\t \t \t divslider = 1; 
 
\t \t \t return; 
 
\t \t } 
 
\t } 
 

 
\t var interval = setInterval(jsslider, 3000); 
 
    
 
});

#div1_wrapper, #div2_wrapper 
 
{ 
 
    border:1px solid red; 
 
    position:absolute; 
 
} 
 
#div2_wrapper 
 
{ 
 
    border:3px solid green; 
 
} 
 

 
/* Borders in CSS are just to see where your div goes. REMOVE IT */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="slideshow" class="site-content" role="main"> 
 
      <div id="div1_wrapper" class="slides"> 
 
       <div id="div1_bg"> 
 
        <img src="https://www.google.co.in/images/srpr/logo11w.png" /> 
 
       </div> 
 

 
       <div id="div1_productimg"> 
 
        <img src="https://www.google.co.in/images/srpr/logo11w.png" /> 
 
       </div> 
 
      </div> 
 

 
      <div id="div2_wrapper" class="slides"> 
 
       <div id="div2_bg"> 
 
        <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" /> 
 
       </div> 
 

 
       <div id="div2_productimg"> 
 
        <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" /> 
 
       </div> 
 
      </div> 
 
</div>

Answer 3

Я обновил скрипку, чтобы лучше соответствовать ваш вопрос: сначала удалить все элементы ползунков, которые содержат изображения без каких-либо больших или продукта изображений; затем проверьте, остается ли хотя бы один элемент. Если найден хотя бы один элемент, скройте все слайдеры, покажите первый, инициализируйте слайд-шоу и начните циклическое перемещение слайдов.

JS код:

$().ready(function() { 

    // remove all elements without a source ... 
    // .... and hide all slide containers 
    $('img[src=""]').parent('div').remove(); 
    $('.slides').hide(); 

    window.slideShow= {}; 

    slideShow.slides= $('.slides .slider-image'); 
    if (slideShow.slides.length > 0) { 

     // unhide all slides that contain at least one image 
     for (var i=0;i<slideShow.slides.length;i++) { 
      $(slideShow.slides[i]).parent('div').parent('div').show(); 
     } 

     // on initialisation, hide all image slides and show the first element only 
     slideShow.slides.hide(); 

     $(slideShow.slides[0]).show(); 
     // show the first parent container 
     $(slideShow.slides[0]).parent('div').parent('div').show('fadein'); 

     // initialise the slideshow properties 
     slideShow.activeSlide= 0; 
     slideShow.numSlides= slideShow.slides.length;   

     // start the show 
     window.setInterval(function() { 

      slideShow.nextSlide= slideShow.activeSlide+1 == slideShow.numSlides ? 0 : slideShow.activeSlide+1; 

      // hide the element shown before 
      $(slideShow.slides[slideShow.activeSlide]).hide('fadein'); 

      // increase the slide counter by 1; start with 0 if end reached 
      slideShow.activeSlide= slideShow.nextSlide; 
      // show the new image 
      $(slideShow.slides[slideShow.activeSlide]).show('fadein');   
     }, 3000); 
    } 
}); 

HTML код:

<div id="slideshow" class="site-content" role="main"> 
     <div id="div1_wrapper" class="slides" style="border: 3px solid red;"> 
      <div id="div1_bg"> 
       <img class="slider-image" src="" alt="This has no source assigned" /> 
      </div> 

      <div id="div1_productimg"> 
       <img class="slider-image" alt="Product Image" src="<?php echo get_option('div1_productimg'); ?>" /> 
      </div> 
     </div> 

     <div id="div2_wrapper" class="slides" style="border: 3px solid green;"> 
      <div id="div2_bg"> 
       <img class="slider-image" alt="Big Image" src="<?php echo get_option('div2_bg'); ?>" /> 
      </div> 

      <div id="div2_productimg"> 
       <img class="slider-image" alt="Product Image" src="<?php echo get_option('div2_productimg'); ?>" /> 
      </div> 
     </div> 

      <!-- more product slides in the demo below... --> 
     </div> 

4. updated demo

Это удалит все DIVs с пустыми изображениями, скрыть все обертки и отобразите тех, по крайней мере, изображение с правильный источник. Затем он будет циклически перемещать изображения и скрывать/отображать текущий слайд изображения.

Примечание: Я бы не использовал слишком много идентификаторов, если они не нужны, а скорее устанавливают идентификаторы для элементов, которые требуют его для идентификации и использования классов для всех элементов с одинаковой функцией или типом (т.<div class="div_big"> вместо <div id="div1_bg">)