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'，则会更容易。

为了解决您的问题而不是显示下一个.slide，您可以click() <li>中的下一个.slider-nav。

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

T = 0毫秒。间隔开始
T = 2000毫秒。下一张幻灯片
T = 3900ms。用户单击导航链接
T = 4000ms。下一张幻灯片

jQuery滑块：活动链接

1 个答案: