0

我正在研究一个全宽的 jQuery 滑块。我卡在导航上。当我单击“1”时，它转到滑块 1。在“2”上，它转到滑块 2……等等。但我希望链接颜色更改为#d45；当链接处于活动状态时。我尝试添加一个 a.active 类......但它似乎不起作用。

这是我的小提琴

这是我的代码：

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);​

任何帮助，将不胜感激。

谢谢

4

1 回答 1

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=3900 毫秒。用户单击导航链接
  • t=4000 毫秒。下一张幻灯片
于 2012-08-28T18:14:28.150 回答