Jquery slider controle

-1

Je souhaite créer un curseur de contenu avec une flèche à gauche et à droite pour naviguer. Qu'est-ce que je veux définir la position du curseur + 100px (Lorsque vous cliquez à droite) et -100px (lorsque vous cliquez sur gauche). Cette fonction fonctionne.Jquery slider controle

Mais ce qui ne va pas, c'est que je veux le désactiver pour se déplacer lorsqu'il a atteint une certaine valeur de position x. Donc, quand mon contenu a atteint la fin, il doit s'arrêter pour que l'utilisateur puisse seulement revenir en arrière.

J'espère que vous pouvez m'aider parce que je ne peux pas le trouver.

CSS

#container{ 
    width: 500px; 
    height: 150px; 
    background:#CDFAA8; 
    overflow:hidden; 
    position:absolute; 
    left: 13px; 
    } 

#slider{ 
    width: 200px; 
    height: 150px; 
    background:#063; 
    position:absolute; 
    left: 0px; 
} 

#block1{ 
    width: 100px; 
    height: 150px; 
    background:#067; 
    float: left; 
} 

#block2{ 
    width: 100px; 
    height: 150px; 
    background:#079; 
    float: left; 
} 

#move_right{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    right:0px; 
    z-index: 200; 
    opacity: 0.2; 
} 

#move_left{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    left:0px; 
    z-index: 200; 
    opacity: 0.2; 
}

HTML

<div id="container"> 
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div> 
<div id="slider"> 

    <div id="block1"></div>  
    <div id="block2"></div> 

</div> 
</div>

java

$("#right").click(function() { 
     $("#slider").animate({ 
      "left": "+=100px" 
      }, "slow"); 
}); 

$("#left").click(function() { 
     $("#slider").animate({ 
      "left": "-=100px" 
     }, "slow"); 

});

Source

2012-02-26 Odee

-2

Vous devez vérifier quelque chose lorsque vous cliquez sur le bouton de la diapositive.

Voici un code qui le fait. Je frappé légèrement dans une fermeture et en a fait dynamique, juste la « étape » est codé en dur parce que votre « curseur » ne pas la largeur que vous voulez faire glisser:

(function($) { 
    var slider = $('#slider'), 
     step = 100, 
     left = parseInt(slider.css('left'), 10), 
     max = $('#container').width() - slider.width(), 
     min = 0; 

    $("#right").click(function() { 
     if (left < max) { 
      var newLeft = left+step; 
      left = (newLeft<max) ? newLeft : max; 
      $("#slider").animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 

    $("#left").click(function() { 
     if (left > 0) { 
      var newLeft = left - step; 
      left = (newLeft>min) ? newLeft : min; 
      slider.animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 
})(jQuery);

Source

2012-02-26 12:48:54 dievardump

Ok (je suis de retour de mes vacances) et je vérifie le script. Ce qui fonctionne sauf pour une chose ... quand #slider est plus large que le conteneur, il arrête de fonctionner – Odee

var L = parseInt($("#slider").css('left')); 

$("#right").click(function() { 
    if (L<400) { 
     $("#slider").animate({ 
      "left": "+=100px" 
      }, "slow"); 
     }); 
    } 

$("#left").click(function() { 
    if (L>0) { 
     $("#slider").animate({ 
      "left": "-=100px" 
      }, "slow"); 
     }); 
    }

Source

2012-02-26 12:29:34 adeneo

La solution finale de ce curseur était:

HTML

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#temp{ 
height: 300px; 
} 

#container{ 
    width: 500px; 
    height: 150px; 
    background:#CDFAA8; 
    overflow:hidden; 
    position:absolute; 
    left: 13px; 
    } 

#slider{ 
    width: 1300px; 
    height: 150px; 
    background:#063; 
    position:absolute; 
    left: 0px; 
} 

#block1{ 
    width: 100px; 
    height: 150px; 
    background:#067; 
    float: left; 
} 

#block2{ 
    width: 100px; 
    height: 150px; 
    background:#079; 
    float: left; 
} 

#move_right{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    right:0px; 
    z-index: 200; 
    opacity: 0.2; 
} 

#move_left{ 
    height: 150px; 
    width: 20px; 
    background: #3f3f3f; 
    position: absolute; 
    left:0px; 
    z-index: 200; 
    opacity: 0.2; 
} 
</style> 
</head> 

<body> 
<div id="temp"> 
<div id="container"> 
    <div id="move_left"><button id="right">&laquo;</button></div><div id="move_right"><br><br><button id="left">&raquo;</button></div> 
<div id="slider"> 

    <div id="block1">1</div>  
    <div id="block2">2</div> 
    <div id="block1">3</div>  
    <div id="block2">4</div> 
    <div id="block1">5</div>  
    <div id="block2">6</div> 
    <div id="block1">7</div>  
    <div id="block2">8</div> 
    <div id="block1">9</div> 
    <div id="block2">10</div> 
    <div id="block1">11</div>  
    <div id="block2">12</div> 
    <div id="block1">13</div> 


</div> 
</div> 
</div>

JAVA

(function($) { 
    var slider = $('#slider'), 
     step = 500, 
     left = parseInt(slider.css('left'), 10), 
     max = $('#container').width() - slider.width(), 
     min = 0; 

    $("#left").click(function() { 
     if (left > max) { 
      var newLeft = left - step; 
      left = (newLeft>max) ? newLeft : max; 
      $("#slider").animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 

    $("#right").click(function() { 
     if (left < 0) { 
      var newLeft = left + step; 
      left = (newLeft<min) ? newLeft : min; 
      slider.animate({ 
       "left": left + 'px' 
      }, "slow"); 
     } 
    }); 
})(jQuery);

Source

2012-03-11 20:49:52 Odee

Jquery slider controle

Répondre

Questions connexes