应该是简单的jQuery循环,但可以';我似乎不知道如何循环处理这个问题
我正在一个网站上建立一个功能,每隔5秒左右就会显示一个新的“特色顾问”。如果只是显示一张图片,我就使用show()&hide()。不幸的是,我必须将图像移出&然后显示一个带有标题文本的div,然后在5秒钟后删除标题&图像。幸运的是,我已经成功地编写了“show”函数和“hide”函数,我甚至让它在隐藏之前等待指定的5秒钟。我的问题是,我不知道如何转到下一个“特色顾问”并运行“等待隐藏”功能。任何建议都是非常有益的。以下是我的代码供参考: CSS: HTML: 使用应该是简单的jQuery循环,但可以';我似乎不知道如何循环处理这个问题,jquery,html,css,loops,Jquery,Html,Css,Loops,我正在一个网站上建立一个功能,每隔5秒左右就会显示一个新的“特色顾问”。如果只是显示一张图片,我就使用show()&hide()。不幸的是,我必须将图像移出&然后显示一个带有标题文本的div,然后在5秒钟后删除标题&图像。幸运的是,我已经成功地编写了“show”函数和“hide”函数,我甚至让它在隐藏之前等待指定的5秒钟。我的问题是,我不知道如何转到下一个“特色顾问”并运行“等待隐藏”功能。任何建议都是非常有益的。以下是我的代码供参考: CSS: HTML: 使用$(#items li)。每个都
$(#items li)。每个
都位于功能取消彩色旋转木马
中,并且所有代码都位于每个
您将能够访问当前li,并可以在“显示和隐藏”功能中相应地修改选择器,使其相对于li元素
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
这可能会起作用。请注意,您的html无效:id属性在页面上应该是唯一的。我正在尝试您的建议,但我无法将计时器设置在正确的位置。它一直在同时启动它们我真的很感谢你的帮助,但是这段代码等待了5秒钟&然后执行感谢你的帮助。虽然我没有使用您提供的所有代码,但我确实使用了设置“下一步”和“当前”的最后一部分。您为我指明了正确的方向&我现在就可以全部使用了。我感谢你的帮助。
<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>
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
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