javascript - 第一次单击按钮后图像 slider 卡住

Question

我有一个关于我从头开始创建的图像 slider 的问题。我想从头开始创建它，因为我不需要很多可以通过使用外部 slider 获得的额外属性。

我有以下设置:

var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;

$( "#slide-right" ).click(function() {
		$(".hold-1").addClass('first');
});

.col-slider{
	position:relative;
	z-index:13;
	margin-top:0px;			
	width:70%;
	overflow:hidden;
	height:174px;
  background-color:yellow;
}
.image-holder {
	width: 175px;
	height: 174px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	margin:0 15px;  
	float:left;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
	font-family: Titillium Web;
	text-transform: uppercase;
	font-weight:600;
	display:inline-block;
	width:85%;
	text-align:center;
	font-size:36px;
}
.col-slider-buttons a{
  margin-right:10px;
  display:inline-block;
  margin-bottom:30px;
}

.first {
	-webkit-animation: animateleft 1s ease-out forwards;
	   -moz-animation: animateleft 1s ease-out forwards;
	    -ms-animation: animateleft 1s ease-out forwards;
	     -o-animation: animateleft 1s ease-out forwards;
	        animation: animateleft 1s ease-out forwards;
}
@keyframes "animateleft" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -185px;
 }

}

@-moz-keyframes animateleft {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

@-webkit-keyframes "animateleft" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

@-ms-keyframes "animateleft" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

@-o-keyframes "animateleft" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
		<a id="slide-left" href="#">Left</a>
		<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
  <div class="image-holder hold-1">
    <h2>TEST 1</h2>
  </div>
  <div class="image-holder hold-2">
    <h2>TEST 2</h2>
  </div>										
  <div class="image-holder hold-3">
    <h2>TEST 3</h2>
  </div>	
  <div class="image-holder hold-4">
    <h2>TEST 4</h2>
  </div>				
</div>

我想要实现的是，每当我按下右边的按钮时，边距就会向左移动。但我需要某种机制来检测它。有没有人知道我如何实现它？我不要求完整的代码实现。任何指导都已经非常有帮助。

简而言之:所需的设置:能够通过左右移动边距来使用左右按钮浏览图像。

对于 JSFIDDLE 演示:JSFIDDLE

Answer 1

您只是将 first 类添加到您的第一个 holder.. (.hold-1)。您可以添加一个额外的变量(计数器)并通过以下方式添加:

$(".hold-" + counter +"").addClass('first');

请看下面:

var num_of_images = $( ".image-holder" ).length;
var visible_images = 2;
var counter = 1;

$( "#slide-right" ).click(function() {
		$(".hold-" + counter +"").addClass('first');
  counter = counter + 1;
});

.col-slider{
	position:relative;
	z-index:13;
	margin-top:0px;			
	width:70%;
	overflow:hidden;
	height:174px;
  background-color:yellow;
}
.image-holder {
	width: 175px;
	height: 174px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	margin:0 15px;  
	float:left;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))
}
.image-holder h2{
	font-family: Titillium Web;
	text-transform: uppercase;
	font-weight:600;
	display:inline-block;
	width:85%;
	text-align:center;
	font-size:36px;
}
.col-slider-buttons a{
  margin-right:10px;
  display:inline-block;
  margin-bottom:30px;
}

.first {
	-webkit-animation: animateleft 1s ease-out forwards;
	   -moz-animation: animateleft 1s ease-out forwards;
	    -ms-animation: animateleft 1s ease-out forwards;
	     -o-animation: animateleft 1s ease-out forwards;
	        animation: animateleft 1s ease-out forwards;
}
@keyframes "animateleft" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -185px;
 }

}

@-moz-keyframes animateleft {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

@-webkit-keyframes "animateleft" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

@-ms-keyframes "animateleft" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

@-o-keyframes "animateleft" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -185px;
 }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-slider-buttons">
		<a id="slide-left" href="#">Left</a>
		<a id="slide-right" href="#">Right</a>
</div>
<div class="col-slider">
  <div class="image-holder hold-1">
    <h2>TEST 1</h2>
  </div>
  <div class="image-holder hold-2">
    <h2>TEST 2</h2>
  </div>										
  <div class="image-holder hold-3">
    <h2>TEST 3</h2>
  </div>	
  <div class="image-holder hold-4">
    <h2>TEST 4</h2>
  </div>				
</div>

希望对你有帮助