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=0ms。インターバル開始
  • t=2000ms。次のスライド
  • t=3900ms。ユーザーがナビゲーションリンクをクリックする
  • t=4000ms。次のスライド
于 2012-08-28T18:14:28.150 に答える