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

工作图像