jquery incrémentant la valeur .click() avec un maximum et un minimum

J'ai un curseur où je dois déplacer la position d'arrière-plan sur le clic. Ceci est mon code à ce jour:jquery incrémentant la valeur .click() avec un maximum et un minimum

$(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"); 
}); 

});

J'ai besoin pour la position d'incrément de 150 sur chaque clic du curseur-suivante et diminution de 150 sur chaque clic de curseur-prev. Je dois aussi mettre un maximum si la position ne sera jamais au-dessus ou en dessous de 0. 2700 lien vers codepen pour voir tout le code: https://codepen.io/jessiemele/pen/RgxQVx

Source

2017-06-28 jessie

Où est votre code html? – Omi

je vais l'ajouter à ma question maintenant – jessie

êtes-vous chanter jquery slider? – Omi

Dans votre code, il y avait deux erreurs simples:

Votre compteur ne sera pas incrémenté la prochaine fois il était juste 150 tout le temps.
Vous n'utilisez pas px pour définir la position d'arrière-plan. la syntaxe de mettre à jour la position est 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>

Source

2017-06-28 20:06:17 Omi

Cela fonctionne parfaitement! Savez-vous comment je peux définir une valeur maximale pour count, par exemple si la valeur est égale à -2700 ou moins, il empêche le div d'être cliquable? – jessie

J'ai mis à jour la réponse – Omi

Vous n'êtes pas mettre à jour la valeur de 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"); 
}); 

});

Source

2017-06-28 19:04:29

cela change la valeur de count mais il ne change pas la valeur de position dans le. css line – jessie

Quel est votre navigateur? –

J'utilise le chrome maintenant mais j'ai accès à tous les – jessie

Ici, vous allez compagnon: https://codepen.io/nitinsuri/pen/WOdMLq. Si vous vérifiez la console à l'URL que vous avez partagée, elle indique $ non défini. J'ai donc ajouté la bibliothèque jQuery.

Une fois cela fait, je l'ai remplacé

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

avec:

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

espoir que cela vous aide.

Source

2017-06-28 20:14:07

jquery incrémentant la valeur .click() avec un maximum et un minimum

Répondre

Questions connexes