为循环中的每个图像重复 CSS 设置（jQuery）

Question

我有这个用于图像滑块的 HTML：

<div>
    <ul id="imageContainer">
        <li><img src="image-1.png" alt=""></li>
        <li><img src="image-2.png" alt=""></li>
        <li><img src="image-3.png" alt=""></li>
        <li><img src="image-4.png" alt=""></li>
        <li><img src="image-5.png" alt=""></li>
        <li><img src="image-6.png" alt=""></li>
        <li><img src="image-7.png" alt=""></li>
        <li><img src="image-8.png" alt=""></li>
        <li><img src="image-9.png" alt=""></li>
    </ul>
</div>

我正在使用 map 方法将 CSS 设置应用于所有图像：

var imageContainer = $('#imageContainer'),
states = [
    { zIndex: 1, width: 120, height: 347, top: 0, left: 170, opacity: 0 },
    { zIndex: 2, width: 130, height: 390, top: 0, left: 0, opacity: 1 },
    { zIndex: 3, width: 160, height: 475, top: 0, left: 147, opacity: 1 },
    { zIndex: 4, width: 220, height: 638, top: 0, left: 322, opacity: 1 },
    { zIndex: 3, width: 160, height: 475, top: 0, left: 555, opacity: 1 },
    { zIndex: 2, width: 130, height: 390, top: 0, left: 730, opacity: 1 },
    { zIndex: 1, width: 120, height: 347, top: 0, left: 570, opacity: 0 },
];

imageContainer.map(function(index, element) {
    imageContainer.find('li:last').prependTo(imageContainer);
    var state = states[index];
    $(element).animate(state);
});

如果我使用 7 个图像（对象中有 7 个状态），但我使用 9 个图像（CSS 设置仅应用于前 7 个图像，后 2 个未定义），则此方法有效。如果我的图片超过 7 张，如何使用这些 CSS 设置？

这里是fiddle。我在滑块中看不到第 8 和第 9 张图片。

Answer 1

我不知道您为什么不在 states 对象中添加更多状态，但是，如果 li 计数大于 states 对象，您可以在函数之前检查。

下面的这个例子有效。我使用 modulo 在states 对象中添加更多价值。我在您的 $lis.each 函数中添加了一个小短代码。请看

$(function () {
	$('.slide').customSlide();
});

(function($) {
    var slide = function(ele, options) {
        var $ele = $(ele);
        var setting = {
            speed: 1000,
            interval: 2000,
        };
		var cssPercentFromTop = 50 + '%';
		var states = [
		    { zIndex: 1, width: 120, height: 347, top: cssPercentFromTop, left: 170, opacity: 0 },
		    { zIndex: 2, width: 130, height: 390, top: cssPercentFromTop, left: 0, opacity: 1 },
		    { zIndex: 3, width: 160, height: 475, top: cssPercentFromTop, left: 147, opacity: 1 },
		    { zIndex: 4, width: 220, height: 638, top: cssPercentFromTop, left: 322, opacity: 1 },
		    { zIndex: 3, width: 160, height: 475, top: cssPercentFromTop, left: 555, opacity: 1 },
		    { zIndex: 2, width: 130, height: 390, top: cssPercentFromTop, left: 730, opacity: 1 },
		    { zIndex: 1, width: 120, height: 347, top: cssPercentFromTop, left: 570, opacity: 0 },
		];
        
		$.extend(true, setting, options);

        var $lis = $ele.find('li');
        var timer = null;

        $ele.find('.custom-slider-next').on('click', function() {
            next();
        });
        
		$ele.find('.custom-slider-prev').on('click', function() {
            states.push(states.shift());
            move();
        });
        
		$ele.on('mouseenter', function() {
            clearInterval(timer);
            timer = null;
        }).on('mouseleave', function() {
            //autoPlay();
        });

        move();
        //autoPlay();

        function move() {

	        var imageContainer = $('.custom-slider ul');
	        imageContainer.find('li:last').prependTo(imageContainer);
      
      $lis.each(function(index, element) {
				///// NEW CODE BY P.Frank /////
        if(index >= states.length){
        	var tap = index % states.length;
          states.push(states[tap])
        }
        ///// NEW CODE BY P.Frank /////
        
				var state = states[index];

				$(element).animate(state, setting.speed);
				$(element).css('transform', 'translate(0, -50%)');
			});

        }

        function next() {
            states.unshift(states.pop());
            move();
        }

        function autoPlay() {
            timer = setInterval(next, setting.interval);
        }
    }
    
	$.fn.customSlide = function(options) {
        $(this).each(function(index, ele) {
            slide(ele, options);
        });
        return this;
    }
	
})(jQuery);

.custom-slider {
	position: relative;
	width: 860px;
	height: 375px;
	margin: 0 auto;
}

.custom-slider .custom-slider-next,
.custom-slider .custom-slider-prev {
	position: absolute;
	top: 50%;
	margin-top: -96px;
	cursor: pointer;
}

.custom-slider .custom-slider-prev {
	left: -200px;
}

.custom-slider .custom-slider-next {
	right: -200px;
}

.custom-slider ul {
	list-style: none;
	position: relative;
	width: 860px;
	height: 630px;
	margin: 0 auto;
	padding: 0;
}

.custom-slider ul li {
	overflow: hidden;
	position: absolute;
	z-index: 0;
	left: 377px;
	top: 146px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.custom-slider ul li img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide custom-slider">
  <div class="custom-slider-prev">
    <img src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_left_black_192x192.png" alt="">
 </div>
  <div class="custom-slider-next">
    <img src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_right_black_192x192.png" alt="">
  </div>
  <ul>
    <li><img src="https://via.placeholder.com/250?text=1" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=2" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=3" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=4" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=5" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=6" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=7" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=8" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=9" alt=""></li>
  </ul>
</div>

Answer 2

如果你不想循环遍历你的 states 数组，我认为你可以这样做：

imageContainer.map(function(index, element) {
    imageContainer.find('li:last').prependTo(imageContainer);
    var state = states[index % states.length];
    $(element).animate(state);
});

index % states.length 返回索引除以状态数组长度的余数。

Answer 3

您也可以使用each() 方法，然后使用this 指定element 属性。这应该遍历每个图像。

imageContainer.each(function(index, element) {
    imageContainer.find('li:last').prependTo(imageContainer);
    var state = states[index];
    $(this).animate(state);
});