jquery遞增值.click（）與最大值和最小值

我有一個滑塊，我需要移動背景位置點擊。這是到目前爲止我的代碼：jquery遞增值.click（）與最大值和最小值

$(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滑塊旁邊和下降的每次點擊150在滑塊分組的每次點擊遞增。我還需要一個最大的設定位置將永遠不會上方2700或低於0.1 鏈接codepen看到所有代碼：https://codepen.io/jessiemele/pen/RgxQVx

來源

2017-06-28 jessie

你的html代碼在哪裏？ – Omi

我會將它添加到我的問題 – jessie

你是否會唱jquery滑塊？ – Omi

值在你的代碼中有兩個簡單的錯誤：

你的計數器沒有得到增量，接下來它只有150次。
您沒有使用px來設置背景位置。語法更新位置background-position: 50px 100px;

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

.slider { 
 
\t width: 550px; 
 
\t height: 125px; 
 
\t 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 { 
 
\t position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 100%; 
 
    margin-top: -16px; 
 
} 
 
.slider-nav { 
 
\t position: relative; 
 
} 
 
.slider-prev { 
 
\t position: absolute; 
 
    left: -30px; 
 
} 
 
.slider-next { 
 
\t position: absolute; 
 
    right: -30px; 
 
} 
 
.slider-next, .slider-prev { 
 
\t display: block; 
 
    height: 24px; 
 
    width: 24px; 
 
    border-radius: 48px; 
 
    padding: 0; 
 
    font-size: 28px; 
 
    line-height: 18px; 
 
    margin: 3px; 
 
    background-color: #2C89A5; 
 
\t color: #FFF; 
 
    background: #869791; 
 
    cursor: pointer; 
 
    text-align: center; 
 
}

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

來源

2017-06-28 20:06:17 Omi

這個完美的作品！你知道我可以如何設置計數的最大值，例如，如果該值等於-2700或更低，它會阻止div被點擊？ – jessie

我已更新答案 – Omi

你沒有更新的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"); 
}); 

});

來源

2017-06-28 19:04:29

這是改變計數的值，但它並沒有改變在位置值。 css line – jessie

什麼是您的瀏覽器？ –

我正在使用chrome，但可以訪問所有人 – jessie

在這裏你去隊友：https://codepen.io/nitinsuri/pen/WOdMLq。如果您在共享的URL處檢查控制檯，則說明$未定義。所以我添加了jQuery庫。

一旦做到這一點，我把它換成

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

有：

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

希望這有助於你。

來源

2017-06-28 20:14:07

jquery遞增值.click（）與最大值和最小值

回答

相關問題