Simple JavaScript Slider

En essayant de trouver un curseur javascript très très simple. Un qui est le strict minimum, pas jquery fantaisie, ou d'autres bibliothèques impliquées. Le curseur le plus simple possible. Avec le minimum de code possible.Simple JavaScript Slider

Merci pour votre attention!

@ Roger Walsh:

Ci-dessous le code HTML: Les .js et .css sont identiques à l'exemple dans le tutoriel vous me faire parvenir. Je suppose que je dois ajouter un peu plus d'informations dans la section du corps, mais je ne comprends pas exactement quoi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<html> 
<head> 

<title> Slider </title> 

<script type="JavaScript" src="slider.js"></script> 
<link href="default.css" rel="stylesheet" type="text/css" /> 

</head> 

<body> 

<html> 
<head> 

<title> </title> 
<script type="text/javascript"> 
</script> 

</head> 

<body> 

<div class="carpe_slider_display_holder"> 
<!-- Default value: 0 --> 
<input class="carpe_slider_display" id="display1" type="text" value="100" /> 
</div> 
<div class="carpe_horizontal_slider_track"> 

    <div class="carpe_slider_slit"> </div> 
    <div class="carpe_slider" id="my_id" orientation="horizontal" distance="100" display="my_id" style="left: 100px;"> </div> 
</div> 

<!--<div class="carpe_horizontal_slider_track"> 
    <div class="carpe_slider_slit"> </div> 
    <div class="carpe_slider" 
     id="my_id" 
     orientation="horizontal" 
     distance="100" 
     display="my_id" 
     style="left: 100px;"> </div> 
</div> 
--> 
</body> 
</html>

Source

2010-09-09 MacPython

aucun curseur très simple n'est possible sans ces bibliothèques. Vous devrez écrire un code différent pour les différents navigateurs, qui gèrent les événements. Pourquoi êtes-vous si peu disposé à utiliser des bibliothèques tierces? – AlexanderMP

Quel genre de curseur? –

Je ne refuse pas. Je veux juste comprendre comment cela fonctionne à partir d'un simple curseur. – MacPython

Essayez celui-ci:

http://carpe.ambiprospect.com/slider/

Source

2010-09-09 09:05:31

Nice merci beaucoup! J'essaie juste de le faire fonctionner. J'ai tout fait dans le tutoriel. Mais pour une raison quelconque, le curseur s'affiche mais ne bouge pas. Que puis-je avoir oublié? Merci encore! – MacPython

pas de problèmes, pas sûr tbh, pouvez-vous poster un lien vers votre démo? –

Si vous voulez moins de code et en temps rapide, je vous recommande d'utiliser une bibliothèque existante pour cela.

Regardez dhtmlx Slider

Simplest Slider Example

Source

2010-09-09 09:20:26 NAVEED

Le Carpe Slider est maintenant à la version 3.0, et il y a des documents ici: http://carpe.ambiprospect.com/slider/documentation.htm et une page de test: http://carpe.ambiprospect.com/slider/test.htm

Le code js est 4 kB compressé.

Source

2014-01-31 04:43:15 user3255925

Bienvenue dans le débordement de la pile. Cela aurait été mieux comme un commentaire à la réponse acceptée. Mais puisque vous êtes nouveau, vous ne pouvez pas encore commenter. – Onots

Ici, vous allez: jsfiddle

JS:

//init 
slides = document.getElementsByClassName("slide"); 
containerWidth = 500; 

Array.prototype.forEach.call(slides, function (el, i) {//set the initial position of each slide 
    el.style.left = (i * containerWidth) + "px"; 
}); 

window.moveSlides = function (direction) { 
    run = true; 
    tracker = containerWidth; //500 in this example. We make a separate variable so we can decrement it 

    if (((direction == "next" && (parseInt(slides[0].style.left) <= (0 - (containerWidth * (slides.length - 1)))))) //compare against 2nd-to-last slide's index, otherwise it'll go 1 slide too far 
    || (direction == "prev" && (parseInt(slides[0].style.left) >= 0))) { run = false; } 

    if (run) { 
    var slideInterval = setInterval(function() { 
     moveRate = 4; //set the speed here (use numbers that the container's width can be divided by without a remainder) 
     Array.prototype.forEach.call(slides, function (el, i) { 
      if (tracker <= 0) { 
      clearInterval(slideInterval) 
      } else { 
      el.style.left = (direction == "next") ? (parseInt(el.style.left) - moveRate) + "px" : (parseInt(el.style.left) + moveRate) + "px"; 
      } 
     }); 
     tracker -= moveRate; 
    }, 1); 
    } 
}

HTML:

<div id="slider-container"> 
    <div id="slider-mask"> 
    <div class="slide one">slide 1</div> 
    <div class="slide two">slide 2</div> 
    <div class="slide three">slide 3</div> 
    <div id="buttons"> 
     <a href="javascript:moveSlides('prev');" id="prev">&lt;Previous</a> 
     | 
     <a href="javascript:moveSlides('next');" id="next">Next&gt;</a> 
    </div> 
    </div> 
</div>

CSS:

#slider-container { 
    width: 999999px; 
    height: 300px; //set to the height you want 
    position:relative; 
} 
#slider-mask { 
    width:500px; //set slide width. must be equal to slide width 
    height:300px; 
    overflow:hidden; 
    position:relative; 
} 
.slide { 
    width:500px; 
    height:100%; 
    top:0; 
    position:absolute; 
} 
#buttons { 
    position:absolute; 
    bottom:5px; 
    left:50%; 
    width: 150px; 
    height:30px; 
    margin-left:-75px; 
}

Source

2014-03-08 11:44:33

Simple JavaScript Slider

Répondre

Questions connexes