jquery - 制作我的图像轮播循环

Question

我使用 HTML 和 CSS 创建了以下图像轮播。它在我的 Wordpress 网站上运行，仅在移动设备上显示。我希望它不断移动，然后在不“重新开始”的情况下重复自己。我只是希望它在一个恒定的循环中运行。

是否可以使用 HTML、CSS 或 jQuery 来实现？在这种情况下，我不想使用纯 JS。

<div class="container">
    <div class="photobanner">       
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/NesherPointer.jpg" alt="נשר">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/2.jpg" alt="Xerox">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/9.jpg" alt="Neutrogena">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/8.jpg" alt="Orbit">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/11.jpg" alt="M & M">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/12.jpg" alt="Mercedes-Benz">            
    </div>
</div>

这是图片轮播的 CSS:

/* Photo Banner */
.container {
    width:100%;
    overflow: hidden;
    margin: 5px auto;
    background: white;
}

.photobanner {
    height: 120px;
    width: 3000px;
}

.photobanner img {
    height: 120px;
    width: 120px;
}

.photobanner img  {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}


/*keyframe animations*/
.second {
    -webkit-animation: bannermoves 25s linear infinite;
       -moz-animation: bannermoves 25s linear infinite;
        -ms-animation: bannermoves 25s linear infinite;
         -o-animation: bannermoves 25s linear infinite;
            animation: bannermoves 25s linear infinite;;
}

@keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}
}

@-moz-keyframes bannermoves {
 0% {margin-left: -3000px;}
 120% {margin-left: 200px;}
}

@-webkit-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: -100px;}
}

@-ms-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}

@-o-keyframes "bannermoves" {
 0% {margin-left: -3000px;}
 100% {margin-left: 200px;}
}

我知道一个笨拙的解决方案是重复链接，但我想知道是否有办法避免这种情况，只需向当前的 CSS 或 HTML 添加一些代码行或其他内容即可。

Answer 1

这种类型的轮播很简单。只需将 white-space: nowrap 添加到 .photobanner，然后使用递归函数。我从 CSS 中删除了过渡。您仍然可以使用它们，但不要使用“margin-left”，因为它会与 jquery animate 中的 marginLeft 产生视觉冲突。

var animateRecursive = function () {

    var photobanner = $(".photobanner");
    
    /**
     * 1. Always get the first child from .photobanner
     */
    var elem = photobanner.children().first();

    /**
     * 2. Append it to .photobanner as last element a cloned version of your 'elem'
     */
    photobanner.append(elem.clone());

    /**
     * 3. Animate it to go to the left and adjust duration
     */
    elem.stop(true, true).animate({
        marginLeft: (-1 * elem.outerWidth()) + 'px'
    }, {
        duration: 500,
        easing: 'linear',
        complete: function () {

            /**
             * 4. Remove the hidden element to keep .photobanner clean
             */
            elem.remove();

            /**
             * 5. Repeat
             */
            animateRecursive();

        }
    });

};

animateRecursive();

.container {
    width: 100%;
    overflow: hidden;
    margin: 5px auto;
    background: white;
}

.photobanner {
    height: 120px;
    width: 750px;
    overflow: hidden;
    white-space: nowrap;
}

.photobanner img {
    height: 120px;
    width: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="photobanner">

        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/NesherPointer.jpg" alt="נשר">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/2.jpg" alt="Xerox">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/9.jpg" alt="Neutrogena">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/8.jpg" alt="Orbit">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/11.jpg" alt="M & M">
        <img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/12.jpg" alt="Mercedes-Benz">

    </div>
</div>