Question

我在http://dlistage.businesscatalyst.com上有幻灯片显示我想让控制器做一个循环，即在到达最后一个项目时显示点击的第一个项目。我已经为图像完成了它但是无法理解如何处理控制器。有人可以帮帮我吗？

我的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

如何制作图像幻灯片循环的控制器？

1 个答案: