Jquery div幻灯片隐藏子元素答案

【问题标题】：Jquery div slideshow hiding child elementsJquery div幻灯片隐藏子元素
【发布时间】：2015-07-21 16:28:06
【问题描述】：

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

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

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

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

【问题讨论】：

你能给我们创建一个demo吗？
您是否查看过任何外部 jquery 插件来实现此目的？
@dkjain 我对你的问题不是很清楚，仍然给你一个简单的方法。看看我的回答。

标签： jquery html slideshow

【解决方案1】：

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

删除所有没有任何正确图像的包装器（我还从没有提供来源的有效包装器中删除了这些图像，以避免“丢失图像”图像）
隐藏所有包装器并仅显示第一个
循环所有包装器，隐藏/显示整个包装器的内容

新代码

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

【讨论】：

那行得通。再次感谢，我希望我有你拥有的那种 JS 技能，这样我就可以帮助像我这样的其他用户，并为你的技能赢得尽可能多的赞赏......FANTASTICCC !!!。
dkjain，这只是时间和练习的问题，您最终会获得技能 ;-) 很高兴我们找到了解决方案！您还想要脚本的暂停和恢复功能吗？
是的，从经验中我了解到，对于开发编程技巧来说，毅力比其他任何事情都重要。你怎么看？
目前该脚本旨在在非用户交互环境中运行，因此不需要恢复和暂停（尽管将来会很好）但是如果脚本能够让用户知道有效的包装器将在幻灯片中显示的 div（有效幻灯片），这将很有帮助。例如在 5 个包装器中只有 3 个是有效幻灯片，无效幻灯片是那些没有图像的包装器（所有图像 src 都是空的）。
嗨 SaschaM78，您能否更新脚本以仅在鼠标悬停时显示左右导航箭头..谢谢

【解决方案2】：

我认为这可能会帮助您了解，我有一些不同的黑客要解决，您有自己的。

看看，如果对你有帮助。

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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

嗨，切换元素似乎是一个 gr8 的想法，但不幸的是它不适合我。 div1_bg 不显示，而 div1_productimg 与 div2_wrapper 及其子元素一起显示。可能是我的 CSS 的问题，但我不确定用户的脚本：divy3993 脚本工作正常，尽管它的动态性较低，并且如果有超过 2 个包装器，则会重复代码。此外，最好考虑仅显示那些包装 div，其中至少一个图像元素设置了 src URL 或未设置为 null 或“”。
dkj，我更新了小提琴和代码以将大/产品图像显示为某种幻灯片，同时取消隐藏当前显示的图像所属的元素。希望更合适？
Ok gr8，除了如果包装器中的至少一个 img src 是空的，它会完全删除包装器 div，如果所有图像都应该从幻灯片中删除包装器 div包装器中的元素 src 为空或未设置。
亲爱的 Sascha，这里的“bg”是指绝对定位在 abs 下方的背景（不大）图像（具有较低的 z-index 并覆盖整个父包装 div）。定位的产品图片（较高的 z-index）。我保持这种方式，所以我可以通过 wordpress 的 get_option() 函数更新它。而不必更新产品元素的背景 css 属性（通过 php“style.css.php”在 css 文件中）。随着更新的演示，正在发生的事情是，对于包装器 div，它显示 bg_image 然后将其淡出然后淡入产品图像，而它应该淡入和淡出包装器 cont..
...不是包装 div 中的单个元素、背景和产品图像。希望这是有道理的..否则我会尝试用图片来解释...