我一直在尝试创建一个基于 Nivo Slider 的 slider ,其外观和功能类似于 http://www.skype.com/intl/en/home 中的 Carousel|
我已查看 Ashfame 的问题和 Chris_Mac ,然而周末的大部分时间我一直在兜圈子。现在回到第一步,从基础开始。
到目前为止,我已经设法让导航正常工作,这样在特定导航项上的鼠标输入会触发 nivo-controlNav 以显示正确的幻灯片并暂停 slider :
<script type="text/javascript">
$("ul#nav_1").mouseenter(
function () {
$(".nivo-controlNav a:nth-child(2)").click();
$('#slider').data('nivoslider').stop();
});
</script>
我还为导航项(1、2、3 等)创建了一个后续的 mouseleave 函数
<script type="text/javascript">
$("ul#nav_1,ul#nav_2,ul#nav_3").mouseleave(
function () {
$('#slider').data('nivoslider').start();
});
</script>
我现在停留在非鼠标事件进入的部分。当 slider 加载时,它应该更新导航 css 以突出显示当前选择的导航项。这是我得到的(我知道的不多,但我正在尝试)。
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
beforeChange: function(){ // this function should load css styles
var slide_num = $('#slider').data('nivo:vars').currentSlide;
function scrollBannerCss () {
if (slide_num == 1) {
$("ul#nav_1").css("backgound-color", "blue");
}
}
},
afterChange: function(){ // this function should unload css styles
});
});
</script>
然后是简单的 html 导航菜单:
<ul id="nav">
<li id="nav_1">button 1</li>
<li id="nav_2">button 2</li>
<li id="nav_3">button 3</li>
</ul>
任何帮助/想法/想法将不胜感激!
最佳答案
我知道这有点旧,但您可能想看看 http://www.agilecarousel.com/ .
http://www.agilecarousel.com/flavor_3.htm考虑到今天的 skype.com 与您两个月前看到的是同一件事,这就是您所说的内容。
关于jquery - Nivo Slider : Skype. com Carousel Effect - 基于CurrentSlide改变Nav的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8552685/