Jquery div 幻灯片隐藏子元素

Question

我正在尝试按照 Jquery 代码制作 div 幻灯片。基本上，我想在隐藏 div2 的同时显示 div1（反之亦然），同时可见 div 的所有子元素也可见。

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

有人可以帮忙弄清楚如何显示 div 及其子元素，同时隐藏其他同级 div 吗？像幻灯片一样。

此外，最好在幻灯片中仅显示那些至少有一个图像元素设置了 src URL 的容器 div（即未设置为 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

我想这可能会帮助你明白，我有一些不同的黑客要解决，你有自己的。

看看对你有没有帮助。

DEMO

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

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

 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 2

我更新了 Fiddle 以更好地匹配您的问题：首先删除所有包含没有大图片或产品图片的滑块元素；然后检查是否至少保留一个元素。如果至少找到一个元素，则隐藏所有滑块，显示第一个，初始化幻灯片放映并开始循环播放幻灯片。

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，隐藏所有包装并取消隐藏至少包含具有正确来源的图像的包装。然后它将循环图像和 hide/unhide 当前图像幻灯片。

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

Answer 3

在阅读了您对我之前回答的评论后，这里有另一个版本应该更接近您的要求：

删除所有没有任何适当图像的包装（我还从有效包装中删除了那些没有给出来源以避免 "missing image" 图像的图像）
隐藏所有包装，只显示第一个
循环所有包装器，hiding/showing整个包装器的内容

新代码

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 显示更改后的功能。

Jquery div 幻灯片隐藏子元素

Jquery div slideshow hiding child elements

html

jquery

slideshow