Question

提前致谢，

我已经成功制作了一个滑块，它是我上周创作的第一个和Jquery的新手，对我来说很光鲜。

我正在尝试让我的滑块循环到第一张图像而不会回到第一张图像传递其他图像，而是在按下下一个箭头时将第一个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>

Jquery的：

$(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
    });
}

}）;

想知道这是不是很明显，或者我是否完全错了。

任何帮助都会很棒。

谢谢。

Answer 1

这有几个问题：

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

将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;否则它会b

如何将Li标签从第一个li移动到最后一个li以连续进行滑块循环

1 个答案: