jquery div幻灯片隐藏子元素

Question

我想跟随div幻灯片的jquery代码。基本上，我想显示div1，同时隐藏div2（反之亦然），并且可见的div的所有子元素也都可见。

下面的代码仅显示可见div的第一个子元素 ，并隐藏所有子元素，然后显示子元素，同时隐藏 前者。

有人可以帮忙弄清楚如何显示一个div及其子元素，同时隐藏另一个兄弟div s？像幻灯片一样。此外，在幻灯片放映中仅显示容器div将是非常好的，其中至少一个图像元素具有src URL集（即，未设置为空或“”）。

感谢 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名的div和一些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

这将删除与空图像的所有div，隐藏所有的包装和具有至少一个与图像取消隐藏那些适当的来源。然后它将循环图像并隐藏/取消隐藏当前图像幻灯片。

备注：如果不需要，我不会使用太多的ID，而是在需要识别的元素上设置ID，并为所有具有相同函数或类型的元素使用类。<div class="div_big">而非<div id="div1_bg">）