Question

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

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

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

此外，在幻灯片中只显示那些容器div是很棒的，其中至少有一个图像元素设置了src URL（即未设置为null或＆＃34;＆＃34;）。

由于 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

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

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，并为具有相同功能或类型的所有元素使用类（即<div class="div_big">而不是<div id="div1_bg">）

Answer 3

在阅读完您之前回答的评论之后，这是另一个应该更接近您要求的版本：

删除所有包装中没有任何正确的图像（我也从有效包装中删除了这些图像，这些包装没有给出来源以避免＆＃34;缺少图像＆＃34;图像）
隐藏所有包装并仅显示第一个
循环所有包装器，隐藏/显示整个包装器的内容

新代码

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幻灯片隐藏子元素

3 个答案: