Image curseur; arrêter à la dernière image

Je ne suis qu'un débutant avec Javascript & jQuery. J'essaie de créer mon propre curseur d'image mais je n'arrive pas à comprendre comment l'arrêter à la dernière image. Quelqu'un peut m'aider?Image curseur; arrêter à la dernière image

Voici le code à ce jour:

// Javascript Document 

$(document).ready(function(){ 

    var slides = $(".slides"); 
    var numberOfSlides = slides.length; 
    var currentPosition = 0; 
    var slideWidth = 500 

    // Apply width to .slider 
    $('.slider').css('width', slideWidth * numberOfSlides); 

    if(currentPosition

Merci à tous ceux qui peuvent aider. Matthieu.

Source

2010-08-16 Matthew Ruddy

Enveloppez votre clic dans une instruction if qui vérifie si la position actuelle est égal au nombre de diapositives:

if(currentPosition <= numberOfSlides){ 
    $(".controls").bind('click',function(){ 
    $(".slider").animate({left:-slideWidth*(currentPosition)},{duration:800,easing:'easeInOutCubic'}); 
    currentPosition++; 
    }); 
}

Source

2010-08-16 17:48:29 hookedonwinter

Considérant qu'il réglage de la "currentPosition" égale à 1 au début, le contrôle conditionnel devra être == au lieu de < . – treeface

ah bonne prise. Merci. Va utiliser <=. – hookedonwinter

J'ai essayé cela, mais il ne semble pas fonctionner:/ –

Avez-vous essayé simple conditionnel? Il semble que vous ayez toutes les pièces là-bas ... demandez simplement si currentPosition est égal à la longueur du tableau de diapositives avant de faire l'animation.

Source

2010-08-16 17:49:44 treeface

J'ai essayé mais ça ne semble pas marcher .. –

Voici mon code & Démo: http://jsbin.com/ixoqu3

La règle de base est de restreindre l'animation lorsque le

1) (current Image index) * (Image width) of the slider is greater than total width
2) (current Image index) * (Image width) of the slider is less than 0 (zero)

Le code JavaScript suivant indique la même chose, Découvrez le fonctionnement Demo

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Hello world !!</title> 
    <style type="text/css"> 
    body{ 
     background:#000; 
     color:#fff; 
    } 
    #slider { 
     padding:0px; 
     margin:0px auto; 
     overflow:hidden; 
     width:500px; 
     border:10px solid #d5d5d5; 
     -moz-border-radius:10px; 
     -webkit-border-radius:10px; 
     border-radius:10px; 
     -moz-box-shadow:0px 0px 20px #f0f; 
     -webkit-box-shadow:0px 0px 20px #f0f; 
     box-shadow:0px 0px 20px #f0f; 
    } 
    ul { 
     padding:0px; 
     margin:0px; 
     position:relative; 
     list-style:none; 
    } 
    li { 
     float:left; 
     padding:0px; 
     margin:0px; 
    } 

    #nav { 
     margin:0px auto; 
     width:200px; 
    } 
    span{ 
     padding:10px; 
     background:#3f3f3f; 
     color:#fff; 
     font:bold 16px verdana; 
     -moz-border-radius:10px; 
     border:1px solid #fff; 
     -moz-box-shadow:0px 0px 30px #0099f9; 
     -webkit-box-shadow:0px 0px 30px #0099f9; 
     box-shadow:0px 0px 30px #0099f9; 
     cursor:pointer; 
    } 
    #num { 
     padding:5px; 
     background:#000; 
    } 
    </style> 

</head> 
<body> 
    <div id="slider"> 
    <ul> 
     <li> 
     <img src="http://www.autoblog.com/media/2006/05/cars-movie.png"/> 
     </li> 

     <li> 
     <img src="http://www.mediabistro.com/fishbowlLA/original/carpass.jpeg.jpg"/> 
     </li> 

     <li> 
     <img src="http://disney-clipart.com/Cars/Disney-Cars-McQueen.jpg"/> 
     </li> 

     <li> 
     <img src="http://www.cargurus.com/blog/wp-content/uploads/2009/01/cars-lightning-mcqueen.jpg"/> 
     </li> 
     <li> 
     <img src="http://www.grahammilton.com/folio/folio_cars1.jpg"/> 
     </li>  
    </ul> 
    </div> 
    <br /><br /> 
    <div id="nav" 
    <span id="prev"> Prev </span> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <span id="next"> Next </span> 
     <br /><br /><br /> 
     Slide number : &nbsp;&nbsp;<span id="num">1</span> 
    </div> 
</body> 
</html>

JavaScript:

var img_width = 500; 
    var img_height = 250; 
    var slide = 0; 
    var speed = 500; 
    var size = 0; 
$(document).ready(function() { 

    size = $('#slider').find('img').length; 

    $('#slider').find('ul').width(img_width * size).height(img_height); 
    $('#slider li, #slider img').width(img_width).height(img_height); 

    $('#next').bind('click',function() { 
    if(slide > img_width * (size - 1) *(-1)) { 
      slide -= img_width; 
     slider(slide); 
    } 
    }); 
    $('#prev').bind('click',function() { 
    if(slide < 0) { 
     slide += img_width; 
     slider(slide); 
    } 
    }); 
}); 

function slider(slideMargin) { 
    $('#slider ul').stop().animate({'left':slideMargin}, speed ,function(){ 
     $('#num').text(Math.abs(slideMargin/ (100 *size)) + 1); 
    }); 
}

Source

2010-08-21 08:12:52

Image curseur; arrêter à la dernière image

Répondre

Questions connexes