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

我建议您不要创建自己的轮播，而应使用Owl.carousel之类的现有解决方案。

这是一个轮播的示例，该轮播在最后一个元素之后重新启动，它使用属性loop: true实现效果：

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="photobanner owl-carousel owl-theme">
	<img src="https://via.placeholder.com/350x150" alt="נשר">
	<img src="https://via.placeholder.com/350x150" alt="Xerox">
	<img src="https://via.placeholder.com/350x150" alt="Neutrogena">
	<img src="https://via.placeholder.com/350x150" alt="Orbit">
	<img src="https://via.placeholder.com/350x150" alt="M & M">
	<img src="https://via.placeholder.com/350x150" alt="Mercedes-Benz">
</div>

Answer 2

这种旋转木马很容易。只需将white-space: nowrap添加到.photobanner，然后使用递归函数即可。我从CSS移除了过渡。您仍然可以使用它们，但是不要使用'margin-left'，因为它会与jquery动画中的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>

使我的图像轮播循环

2 个答案: