Question

我有一个滑块，我需要在点击时移动背景位置。到目前为止，这是我的代码：

$( document ).ready(function() {

var count = 0;
$(".slider-next").click(function() {
    var position = count + 150;
   $(".slider").css("background-position", position + "0");
});
    $(".slider-prev").click(function() {
        var position = count - 150;
    $(".slider").css("background-position", position + "0");
});

});

我需要在每次点击滑块时增加150个位置，并在每次点击slider-prev时减少150。我还需要设置一个最大值，这样位置永远不会超过2700或低于0。链接到codepen以查看所有代码：https://codepen.io/jessiemele/pen/RgxQVx

Answer 1

您没有更新count

的值

$( document ).ready(function() {

var count = 0;
$(".slider-next").click(function() {
    var position = count + 150;
    count += 150;
   $(".slider").css("background-position", position + "0");
});
    $(".slider-prev").click(function() {
        var position = count - 150;
        count -= 150;
    $(".slider").css("background-position", position + "0");
});

});

Answer 2

在您的代码中有两个简单的错误：

你的计数器接下来没有增加，只有150次。
您没有使用px设置背景位置。更新位置的语法是background-position: 50px 100px;

＆＃13;

var count = 0,min=0,max=2700;
 	$(".slider-next").click(function() {
   if(count<=max) {
 	   count += 150;
 	   $(".slider").css('background-position', count +'px 0px');
     }
	});
	 	$(".slider-prev").click(function() {
    if(count>min){
	 	count = count - 150;
  		$(".slider").css("background-position", count + "px 0px");
      }
	});

＆＃13;

.slider {
	width: 550px;
	height: 125px;
	position: relative;
    margin-left: auto;
    margin-right: auto;
    background: url(https://stage.dmipartners.com/wp-content/uploads/2017/06/services-logos.png);
    background-position: 0 0;
}
.controls {
	position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -16px;
}
.slider-nav {
	position: relative;
}
.slider-prev {
	position: absolute;
    left: -30px;
}
.slider-next {
	position: absolute;
    right: -30px;
}
.slider-next, .slider-prev {
	display: block;
    height: 24px;
    width: 24px;
    border-radius: 48px;
    padding: 0;
    font-size: 28px;
    line-height: 18px;
    margin: 3px;
    background-color: #2C89A5;
	color: #FFF;
    background: #869791;
    cursor: pointer;
    text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="slider">
	<div class="controls">
 			<div class="slider-prev">‹</div>
			<div class="slider-next">›</div>
	</div>
</div>
 </body>

＆＃13;

Answer 3

你在这里交配：https://codepen.io/nitinsuri/pen/WOdMLq。如果您在共享的URL处检查控制台，则表示未定义$。所以我添加了jQuery库。

一旦完成，我已经取代了

$(".slider").css("background-position", position + "0");

使用：

$(".slider").css("background-position-x", position);

希望这会对你有所帮助。

jquery递增值.click（）最大值和最小值

3 个答案: