使我的图像循环播放

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添加到.protobanner中，然后使用递归函数。我从CSS中删除了转换。您仍然可以使用它们tho，但不要使用"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>

Answer 2

我建议您不要创建自己的carousel，而是使用现有的解决方案，如Owl.coousel。

下面是一个转盘的例子，它在最后一个元素之后重新启动，它使用属性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>