0

我正在一个网站上构建一个功能，每 5 秒左右显示一个新的“特色顾问”。如果它只是显示一张图片，我会使用 show() 和 hide()。不幸的是，我必须将图像移出然后显示一个带有一些标题文本的 div，然后在 5 秒后删除标题和图像。幸运的是，我已经成功编写了“显示”功能和“隐藏”功能，而且我什至让它在隐藏前等待指定的 5 秒。我的问题是我不知道如何转到下一个“特色顾问”并运行 show-wait-hide 功能。任何建议都会非常感激。这是我的代码供参考：

CSS：

article[role=main] aside li {/*Set up the basic stying & hide them all*/
   list-style: none;
   margin: 0px;
   padding: 0px;
   display: none;
  }

article[role=main] aside li.show { /*Only show one at a time*/
display: block;
}

HTML：

<ul id="items">
<li class="show">
    <a href="#">
        <div class="caption">
          <h5>Featured Counselor</h5>
            <h3>Courtney Humphrey</h3>
            <h4>Registered Dietician</h4>
        </div><!-- End #caption -->
        <div class="featured-counselor">
            <img src="img/featured_counselor_placeholder.jpg" />
        </div><!-- End #featured-counselor -->
    </a>
</li>
<li>
    <a href="#">
        <div class="caption">
          <h5>Featured Counselor</h5>
            <h3>Test Two Title</h3>
            <h4>Registered Dietician</h4>
        </div><!-- End #caption -->
        <div class="featured-counselor">
            <img src="img/featured_counselor_placeholder.jpg" />
        </div><!-- End #featured-counselor -->
    </a>
</li>

jQuery：

featuredCounselorCarousel(); //Call the function that runs the show

function featuredCounselorCarousel() {
    showCurrentCounselor(); //Show the Counselor First
    setTimeout(function() { //Add a timer (Show for 5 seconds)        
    hideCurrentCounselor() //After 5 seconds, hide the current counselor                    
    }, 5000)
}// End featuredCounselorCarousel


function showCurrentCounselor() { //This is the Function that shows the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "0px"}, 900, 'easeInOutQuint');//Slide out
    $('article[role=main] aside ul li.show #caption').delay( 1000 ).fadeIn(400);//Display the Caption
}// End showCurrentCounselor 


function hideCurrentCounselor() { //This is the Function that hides the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "-230px"}, 900, 'easeInOutQuint');//Slide Back In
    $('article[role=main] aside ul li.show #caption').delay( 500 ).fadeOut(400);//Remove the Caption
}// End hideCurrentCounselor
4

2 回答 2

1 
 function triggerCarousal(){  setTimeout(function() { //Add a timer (Show for 5 seconds)        
     featuredCounselorCarousel();                    
    }, 5000) }

function featuredCounselorCarousel() {
    hideCurrentCounselor();
showCurrentCounselor(); //Show the Counselor First

}// End featuredCounselorCarousel


function showCurrentCounselor() { //This is the Function that shows the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "0px"}, 900, 'easeInOutQuint');//Slide out
    $('article[role=main] aside ul li.show #caption').delay( 1000 ).fadeIn(400);//Display the Caption
}// End showCurrentCounselor 


function hideCurrentCounselor() { //This is the Function that hides the Counselor       
    $('article[role=main] aside ul li.show #featured-counselor').delay( 100 ).animate({"left": "-230px"}, 900, 'easeInOutQuint');//Slide Back In
    $('article[role=main] aside ul li.show #caption').delay( 500 ).fadeOut(400);//Remove the Caption
current = $('article[role=main] aside ul li.show');
next = $(current).next();
$(next).toggleClass("show");
$(current).toggleClass("show);
}// End hideCurrentCounselor

这可能有效..

于 2013-09-21T14:31:56.207 回答
0

$(#items li).each在你的函数内部使用，你的featuredCounselorCarousel所有代码都在每个内部。

您将能够访问当前的 li 并可以相应地修改 show 和 hide 函数中的选择器以相对于 li 元素。

于 2013-09-21T13:56:39.183 回答