jQuery滑块：活动链接

Question

我正在使用全宽jQuery滑块。 我被困在导航。 当我点击“1”时，它会转到滑块1.在“2”上，它会转到幻灯片2 ......等等。 但我希望链接颜色更改为＃d45;当链接处于活动状态时。 我尝试添加一个a.active类...但它似乎不工作。

这里是我的fiddle

这里是我的代码：

HTML

<div class="slider"> 
    <div class="slide">1</div> 
    <div class="slide">2</div> 
    <div class="slide">3</div> 
    <div class="slide">4</div> 
</div> 
<ul class="slider-nav"> 
    <li><a href="#" >1</a></li> 
    <li><a href="#" >2</a></li> 
    <li><a href="#" >3</a></li> 
    <li><a href="#" >4</a></li> 
</ul> 
<div class="clear"></div> 
<div class="content"> 
    <div class="wrapper"> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
     <p>Some site content will be here</p> 
    </div> 
</div> 
<div class="footer"> 
    <div class="wrapper">&copy; www.mysite.com</div> 
</div>​ 

CSS

.clear { clear:both; } 
.wrapper { width:980px; margin:0 auto; } 
.slider { margin:0 0; height:200px; position:relative; } 
.slider .slide { display:none; background:red; position:absolute; height:200px; width:100%; text-align:center; color:#fff; font-size:24pt; } 
.header { background:#eee; font-size:18pt; } 
.content { } 
.footer { background:#eee; text-align:center; } 

.slider-nav { margin: 0 auto; width:100px; clear:both; } 
.slider-nav li { float:left; margin:0 5px; } 

.slider-nav li a.active { color:#d45; } 
​ 

jQuery

$('.slider .slide:first').addClass('active').fadeIn(200); 

function rotate(index) { 
    $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
     $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200); 
    }); 
} 

$('.slider-nav li a').click(function() {  
    var index = $(this).parent().index('li'); 
    rotate(index); 
    return false; 
}); 

setInterval(function() { 
    var $next = $('.slider .slide.active').next(); 

    if ($next.length == 0) 
     $next = $('.slider .slide:first'); 

    rotate($next.index()); 
}, 2000);​ 

任何帮助，将不胜感激。

谢谢

Answer 1

见http://jsfiddle.net/5UYmu/3/

$('.slider .slide:first').addClass('active').fadeIn(200); 

function rotate(index) { 
    $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
     $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200); 
    }); 
} 

$('.slider-nav li').click(function() { 
    clearInterval(timer); 
    $(this).siblings('.active').removeClass('active'); 
    $(this).addClass('active'); 
    var index = $(this).index('li'); 
    rotate(index); 
    timer=setInterval(go, 2000); 
    return false; 
}); 
$('.slider-nav li:first').click(); 
var timer=setInterval(go, 2000); 
function go() { 
    var $next = $('.slider-nav li.active').next(); 
    if ($next.length == 0){ 
     $next = $('.slider-nav li:first'); 
    } 
    $next.click(); 
} 

如果添加click事件'.slider-nav li'而不是'.slider-nav li a'它更容易。

而且为了解决不会显示下一​​你的问题，你可以在.slider-navclick()下一<li>。

此外，我认为如果我们清除用户点击导航链接的时间间隔会更好。这样我们就避免了这样的情况：

• t = 0ms。间隔开始
• t = 2000ms。下一张幻灯片
• t = 3900ms。用户点击导航链接
• t = 4000ms。下一张幻灯片