jquery - カスタム Jquery スライダーの作成

Question

これが私がこれまでに持っているものです: http://jsfiddle.net/6j4cT/3/

この投稿に追加するコードが多すぎるため、コードを貼り付けないで申し訳ありません。

まず、私がこれまでに持っている JQuery は、「ニュース項目」内の最初の LI を選択せず​​、クラス「アクティブ」を追加していません。

また、誰かが私のコードをよりきれいな形式に書き直したい場合は、それを歓迎します。

どうもありがとう！

Answer 1

active最初のli要素 にクラス名を付けるだけです。

<ul id="news-items">
    <li class="active">
        <a href="#">Node 1</a>
    </li>
    <li>
        <a href="#">Node 2</a>
    </li>
</ul>

参考：jsFiddle

---

ステータスの更新: jsFiddle Rev 2

jQuery を使用してクラスを追加することもできます。

var periodToChangeSlide = 5000;
var pp_slideshow = undefined;
var currentPage = 0;
$('#news-items li:first').addClass('active');

---

メッセージリクエストによる再改訂: jsFiddle Rev 4

var periodToChangeSlide = 5000;
var pp_slideshow = undefined;
var currentPage = 0;
$('#news-feature-img-wrap li').css('display','list-item').slice(1).css('display','none');
$('#news-items li:first').addClass('active');

メッセージのコメントによると、新しい追加display:list-itemは最初の項目のみに設定display:noneされ、残りの項目は jQuery.slice()メソッドによって切り捨てられているため設定されます。

Answer 2

数日後にSOに戻ります:)解決策：作業デモ-http ://jsfiddle.net/qJea8/またはhttp://jsfiddle.net/qJea8/show

クリックするNode 1と最初のスライドに移動し、次のスライドに移動します。

犯人は：親が常に同じインデックスを返すため、にvar index = $(this).parent().index();変更します。var index = $(this).index();

休息それが原因に役立つことを願っています。:)

コード

// News Article Slideshow
var periodToChangeSlide = 5000;
var pp_slideshow = undefined;
var currentPage = 0;
$("#news-feature-wrap #news-items li").click(function() {
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');

    var index = $(this).index();
    var toShow = $("#news-feature-wrap #news-feature-img-wrap li").eq(index);
    toShow.show();
    toShow.siblings().hide();
    currentPage = index;
    $.stopSlideshow();
});

$.startSlideshow = function() {
    if (typeof pp_slideshow == 'undefined') {
        pp_slideshow = setInterval($.startSlideshow, periodToChangeSlide);
    } else {
        $.changePage();
    }
}

$.stopSlideshow = function() {
    clearInterval(pp_slideshow);
    pp_slideshow = undefined;
}
$.changePage = function() {
    var numSlides = $('#news-feature-wrap #news-feature-img-wrap li').length;
    currentPage = (currentPage + 1) % numSlides;
    var menu = $('#news-feature-wrap #news-items li').eq(currentPage);
    menu.addClass('active');
    menu.siblings().removeClass('active');

    var toShow = $("#news-feature-wrap #news-feature-img-wrap li").eq(currentPage);
    toShow.show();
    toShow.siblings().hide();
}

$.startSlideshow();​

作業画像