Question

大家早上好。

我构建了一个网格WordPress模板，它应该以这种方式工作：

淡入div＃1的内容，显示一段时间，淡出内容;
淡入div＃2的内容（滑块），启动滑块，显示所有幻灯片，当它完成循环时淡出内容;
淡出div＃3的内容，显示一段时间，淡出内容;
淡入div＃4的内容，显示一段时间，淡出内容;
从第1步开始重新开始循环。

我设法获得了here的结果，但很难为每个淡入/淡出匹配正确的时间，并且滑块的行为不是我需要的东西。

这是HTML结构：

<div class="entry-content">
<section id="home_first_box" class="sec_double first">
    <span>some content</span>
</section>
<section class="sec_single"></section>
<section id="home_box_3" class="sec_single last">
    <img>
</section>
<section id="home_box_4" class="sec_single first">
    <img>
</section>
<section class="sec_single"></section>
<section class="sec_single"></section>
<section id="home_box_7" class="sec_single last">
    <img>
</section>
<section class="sec_single first bottom slider">
    <div class="flexslider">
        <ul class="slides">                                                     

                <li>
                    <img>
                </li>
                <li>
                    <img>
                </li>
                <li>
                    <img>
                </li>
                <li>
                    <img>
                </li>                               
        </ul>
    </div>                                
</section>
<section class="sec_single bottom"></section>
<section id="home_second_box" class="sec_double last bottom">
    <span>some other content</span>
</section></div>

这是我正在使用的（可怕的）JavaScript / jQuery代码：

function startSlider() {
$('.flexslider').flexslider( {
    animationLoop: true,
    controlNav: false,
    slideshowSpeed: 1000,
    animationSpeed: 500,
    after: function(slider)  {
        if ( slider.currentSlide == (slider.count - 1) <? // slides count starts from 0 ?> )  {
        slider.pause();
        setTimeout(function (){slider.play()},5000);
        }
    }
});
}


function HomeLooper() {
    $('#home_box_3 img').fadeIn(500).delay(500).fadeOut(500,startSlider);
    $('.flexslider').delay(1500).fadeIn(500).delay(4500).fadeOut(500);
    $('#home_box_4 img').delay(6000).fadeIn(500).delay(500).fadeOut(500);
    $('#home_box_7 img').delay(7000).fadeIn(500).delay(500).fadeOut(500,HomeLooper);
}

我不包含CSS代码，因为它不相关，我认为。

我正在寻找一个不同的方法来解决这个问题，这个方法太难管理，根本没有灵活性。

任何人都可以通过更好的方式来满足我的需求吗？我不需要一个正常工作的代码（无论如何我真的很感激，但我想自己玩得开心！），只是一个找到更好方法的小贴士。

提前致谢，祝你有愉快的一天。

根据定义的时间添加/显示不同的div的内容

0 个答案: