我正在网站上建立一个功能,每隔5秒左右就会显示一个新的“特色顾问”。如果它只是显示一张图片,我会使用show()&隐藏()。不幸的是,我必须将图像移出&然后显示带有一些标题文本的div,然后在5秒后删除标题&图片。幸运的是,我已成功编写了“show”函数和“hide”函数,我甚至让它在隐藏前等待指定的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
答案 0 :(得分: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
这可能有用......
答案 1 :(得分:0)
在$(#items li).each
功能中使用featuredCounselorCarousel
,所有代码都在每个内部。
您将能够访问当前的li并可以相应地修改show和hide函数中的选择器以相对于li元素。