单击第一个按钮后，图像滑块卡住了

时间：2017-03-20 12:16:12

标签： javascript jquery html css

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

我有以下设置：

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 DEMO：JSFIDDLE

2 个答案:

答案 0 :(得分：2)

您只是将班级first添加到您的第一个持有人..（.hold-1）。您可以添加其他变量（计数器）并按以下方式添加：

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

看看下面的内容：

＆＃13;
＆＃13; 
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;
});
＆＃13; 
.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;
 }

}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望有所帮助

答案 1 :(得分：1)

我添加/更改了这些代码行：

$(".hold-"+ ($('.image-holder.first').length + 1)).addClass('first');

它的作用：它计算同时包含“image-holder＆amp;类的元素数量。 first。然后我添加1，以获得我们想要将我们的类添加到

的hold-类的值 

var num_of_images = $(".image-holder").length;
var visible_images = 2;
$("#slide-right").click(function() {
  $(".hold-"+ ($('.image-holder.first').length + 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>

相关问题
最新问题