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