jquery - 如何制作图像幻灯片循环的 Controller ？

Question

我在 http://dlistage.businesscatalyst.com 上有一个幻灯片 我想让 Controller 做一个循环，即在到达最后一项时显示第一项点击。我已经为图像完成了，但无法理解如何使用 Controller 。 有人可以帮我解决这个问题吗？

我的html是这样的

    <div class="controller-3">
<ul>
<li class="selected"></li><li></li><li></li><li></li><li></li></ul>
</div>

我的js是这样的

function worksCarousel(){
var totalWorks = $(".wrapper-project ul li").length;
var ampleWork = $(".project-content").width();
var ampleTotalWorks = totalWorks*ampleWork;
$('.wrapper-project ul').css('width',ampleTotalWorks)

var fragment = document.createDocumentFragment(), 
li = document.createElement('li');
while (totalWorks--) {
    fragment.appendChild(li.cloneNode(true));
}

$('.controller-3 ul').append(fragment);

var index3 = 0;
var pos3 = 1;

    var images_li = $(".wrapper-project ul li").toArray(), current_img = 0;
$(images_li[current_img]).show();


$('.controller-3 ul li:first-child').addClass('selected');

$(".controller-3 ul li").click(function(){
    index3 = $(this).index();
    $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
     $('.controller-3 ul li').removeClass('selected');
    $(this).addClass('selected');
    //alert(ampleitem);
});

我的CSS是

.controller-2, .controller-3 {
    float: right;
    right: 50%;
    position: relative;
    margin: 30px 0 60px;
}
.controller-3 {
    margin-top: 0;
}
.controller-2 ul, .controller-3 ul {
    padding: 0;
    float: right;
    right: -50%;
    position: relative;
}
.controller-2 ul li, .controller-3 ul li {
    list-style: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #909090;
    background: #fff;
    float: left;
    margin: 0 7px;
    cursor: pointer;
    margin: 35px 0 0 15px;
}
.controller-3 ul li {
    border: 2px solid #909090;
}
.controller-2 ul li:hover, .controller-3 ul li:hover {
    border: 2px solid #4ad8ed;
    background: #4ad8ed;
}
.controller-2 ul li:first-child, .controller-3 ul li:first-child {
    margin-left: 0px;
}
.controller-2 ul li:last-child, .controller-3 ul li:last-child {
    margin-right: 0px;

Answer 1

你可以这样做:

$('.controller-3 li').click(function () {
    var $btn = $(this).addClass('selected'),
        idx = $btn.index();
    $(images_li).hide().eq(idx).show();
    $btn.siblings().removeClass('selected')
});

虽然当您将 images_li 转换为数组时一切正常，但您实际上并不需要这样做，因为 jQuery 已经将集合视为数组。

例如试试这个 console.log( $(".wrapper-project ul li").length)

DEMO