Question

我正在查看这个问题（下面的链接），它将点击的项目移动到中心，我想尝试一下这样的功能：

How to move a carousel item to the middle when it's clicked in jquery

1-用户点击项目和项目移动到中间

2-转换完成后，会打开一个包含一些信息的模态或灯箱。

您可以帮助我的问题（请注意我没有经验丰富的前端设计师，但尝试过）：

Q1 - 是否有任何现有插件可以执行此操作？我做了一些研究，最接近的结果是我上面提到的这个问题

Q2 - 如果没有，你知道有类似的吗？或者我怎样才能确定项目移动到中间以打开弹出窗口？

请在此处找到示例

<div id="wrapper">
<div id="carousel">
    <a href="#" class="prev">prev</a>
    <a href="#" class="next">next</a>

    <div class="viewport">
        <ul>
            <li><a href="#">Un</a></li>
            <li><a href="#">Deux</a></li>
            <li><a href="#">Trois</a></li>
            <li><a href="#">Quatre</a></li>
            <li><a href="#">Cinq</a></li>
            <li><a href="#">Six</a></li>
            <li><a href="#">Sept</a></li>
            <li><a href="#">Huit</a></li>
        </ul>
    </div>
    <!-- viewport -->

</div>
<!-- carousel -->

var carousel = $('#carousel'),
    prev = carousel.find('.prev'),
    next = carousel.find('.next'),
    viewport = carousel.find('.viewport'),
    item = viewport.find('li'),
    itemWidth = item.outerWidth(true),
    itemNum = item.length,
    itemList = viewport.find('ul');

itemList.width(itemWidth * itemNum);

var moveCarousel = function(dir) {
    itemList.animate({ left: '-=' + (itemWidth  * dir) + 'px' }, 400);  
};

//prev
prev.on('click', function(e) {
    e.preventDefault();
    moveCarousel(-1);
});

//next
next.on('click', function(e) {
    e.preventDefault();
    moveCarousel(1);
});

//carousel item
item.on('click', 'a', function(e) {
    var self = $(this),
        selfIndex = self.index(),
        distance = itemList.width() / 2,
        selfPos = self.position(),
        selfPosLeft = selfPos.left,
        viewportPosLeft = viewport.position().left;

    e.preventDefault();

    //move item to middle, but it doesn't work... 
    if (selfPosLeft > Math.floor(viewport.width())/3) {
        itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
    }

    if (selfPosLeft < Math.floor(viewport.width())/3) {
        itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
    }
});

http://jsfiddle.net/sp9Jv/

它有点笨重，它在空白区域上进行循环（所以它不能识别最后一项）但它是一个好的开始

谢谢

Answer 1

您可以检查项目列表中的图像长度，并在达到此值后将轮播移回到开头。我添加了一个更新的小提琴。希望你能够做到这一点并改进它。

http://jsfiddle.net/sp9Jv/33/

var carousel = $('#carousel'),
    prev = carousel.find('.prev'),
    next = carousel.find('.next'),
    viewport = carousel.find('.viewport'),
    item = viewport.find('li'),
    itemWidth = item.outerWidth(true),
    itemNum = item.length,
    itemList = viewport.find('ul'),
    itemLength = item.length,
    start = 0;

itemList.width(itemWidth * itemNum);

var moveCarousel = function(dir) {
    itemList.animate({ left: '-=' + (itemWidth  * dir) + 'px' }, 400);  
};

var moveToStart = function() {
    itemList.animate({ left: '0px' }, 400); 
    start = 0;
};

//prev
prev.on('click', function(e) {
    e.preventDefault();
    if(start > 0){
        moveCarousel(-1);
        start --
    }
});

//next
next.on('click', function(e) {
    e.preventDefault();

    start ++    
   if(start > itemLength-1){
        moveToStart();
   } else {
        moveCarousel(1);
   }
});

//carousel item
item.on('click', 'a', function(e) {
    var self = $(this),
        selfIndex = self.index(),
        distance = itemList.width() / 2,
        selfPos = self.position(),
        selfPosLeft = selfPos.left,
        viewportPosLeft = viewport.position().left;

    e.preventDefault();

    //move item to middle, but it doesn't work... 
    if (selfPosLeft > Math.floor(viewport.width())/3) {
        itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
    }

    if (selfPosLeft < Math.floor(viewport.width())/3) {
        itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
    }
});

旋转木马将项目移动到中间并打开模态

1 个答案: