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>

我正在使用地图方法将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对象。

下面的示例工作。我使用取模在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

如果您不想循环通过状态数组，我想您可以执行以下操作：

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

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

3 个答案: