0

我试图让我的滑块循环到第一个图像，而不是通过其他图像返回第一个图像，而是在按下下一个箭头时将第一个 Li 标签添加到最后一个 Li 标签，以便它始终添加以前的 Li 将里面的图像标记到最后。也需要它在以前的工作上工作。

到目前为止，我已经走了多远：

html:

<div class="slider corners">
        <ul>
            <li class="corners"><span class="corners"></span><img src="../images/slider/image_1.png" width="854" height="393" alt="Image" /></li>
            <li class="corners"><span class="corners"></span><img src="../images/slider/image_2.png" width="854" height="393" alt="Image" /></li>
            <li class="corners"><span class="corners"></span><img src="../images/slider/image_3.png" width="854" height="393" alt="Image" /></li>
        </ul>                                              
</div>
<div id="slider-nav">
    <button class="left_arrow" data-dir="prev"></button>
    <button class="right_arrow" data-dir="next"></button>
</div>

查询：

$(function() {
var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width,
    imgsLen = imgs.length,
    current = 1, 
    totalImgsWidth = imgsLen * imgWidth; 

$('#slider-nav').show().find('button').on('click', function() {
    var direction = $(this).attr('data-dir'),
    loc = imgWidth;     

    if ( direction === 'next' ) {
            $('.slider li').first().insertAfter( '.slider li:last');
        }else if ( direction === 'prev' ) {
            $('.slider li:last').insertAfter('.slider ul');
        }

    transition(sliderUL, loc, direction);
}); 

function transition( container, loc, direction ) {
    var unit; // -= +=

    if ( direction && loc !== 0 ) {
        unit = ( direction === 'next' ) ? '-=' : '+=';
    }

    container.animate({
        'margin-left': unit ? (unit + loc) : loc
    });
}

});

我想知道这是否很明显，或者我是否完全错误地这样做了。

4

1 回答 1

0

这有几件事不对：

$('.slider li:last').insertAfter('.slider ul');

会将最后一个 li 放在 UL 之后，如下所示：

    <ul>
    <li></li>
    <li></li>
    </ul>
    <li></li> <-- here!

显然不是你想要的，改用这个：

$('.slider li:last').insertBefore('.slider ul li:first');

您的 html data-dir 值也可能是 += 和 -= ，因此您可以删除整个单元的内容，这将使其更容易。

将第一个或最后一个 li 移动到开始/结束后，您需要将 ul 重新定位回 margin-left: 0; 否则它将

于 2013-02-14T11:27:18.803 回答