Cassangel a écrit :
Marche très bien sur fiddle, mais pas vraiment en vrai, même en essayant de bidouiller le sélécteur firstSection...
Je l'ai héberger ici.
lol
![Smiley biggrin](https://cdnf.alsacreations.net/smilies/biggrin.gif)
Tu penses bien que s'il marche su JSField alors il marchera partout. Tu as juste placer le code n'importe comment
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8" />
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
html, body {height:100%;}
html, body, section, p {margin:0;}
#Conteneur-Central {overflow:hidden;height:100%;}
#wrapper {white-space:nowrap;height:100%;}
#Conteneur-Central section {position:relative;display:inline-block;vertical-align:top;width:100%;height:100%;color:#fff;transition:margin-left 1s ease;}
#Conteneur-Central section:nth-child(1) {background:#0099CC;}
#Conteneur-Central section:nth-child(2) {background:#12D05F;}
#Conteneur-Central section:nth-child(3) {background:#CC3029;}
#Conteneur-Central section:nth-child(4) {background:#FFC02A;}
#Conteneur-Central section:nth-child(5) {background:#CC3D91;}
#Conteneur-Central p {overflow:hidden;position:relative;top:45%;text-align:center;font:500% sans-serif;}
#Conteneur-Central a span {font-size:0 !important;color:transparent !important;}
#Conteneur-Central p+a:before {content:"«";left:2%;}
#Conteneur-Central a+a:before {content:"»";right:2%;}
#Conteneur-Central p+a:before, #Conteneur-Central a+a:before {position:absolute;width:60px;height:60px;top:50%;margin-top:-20px;text-align:center;font:250%/53px sans-serif;border-radius:30px;color:#333;background:#fff;}
#Conteneur-Central a[href="#"] {display:none;}
</style>
</head>
<body>
<div id="Conteneur-Central">
<div id="wrapper">
<section id="un">
<p>1</p>
<a href="#"><span>nul</span></a><a href="#deux"><span>Suivant</span></a>
</section><!--
--><section id="deux">
<p>2</p>
<a href="#un"><span>Précédent</span></a><a href="#trois"><span>Suivant</span></a>
</section><!--
--><section id="trois">
<p>3</p>
<a href="#deux"><span>Précédent</span></a><a href="#quatre"><span>Suivant</span></a>
</section><!--
--><section id="quatre">
<p>4</p>
<a href="#trois"><span>Précédent</span></a><a href="#cinq"><span>Suivant</span></a>
</section><!--
--><section id="cinq">
<p>5</p>
<a href="#quatre"><span>Précédent</span></a><a href="#"><span>nul</span></a>
</section>
</div>
</div>
<script type="text/javascript">
function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}
function elementIndex(a,b){for(var i=0, l=a.length; i<l; i++){if (a[i]===b) return i;}}
var navLinks = document.querySelectorAll("#Conteneur-Central section a"),
allSections = document.querySelectorAll("#Conteneur-Central section"),
firstSection = document.querySelector("#Conteneur-Central>div>section:first-child"),
currentIndex = 0, clicked = false;
function scrollSection(e){
(e.stopPropagation()) ? e.stopPropagation() : e.cancelBubble;
(e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
var cur = e.target || e.srcElement,
positionMaxDebut = (currentIndex == 0 && (e.detail < 0 || e.wheelDelta > 0 || e.keyCode == 37 || e.keyCode == 38)),
positionMaxFin = (currentIndex == allSections.length-1 && (e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40) && !clicked),
toucheNonGeree = e.keyCode < 37 || e.keyCode > 40;
if (positionMaxDebut || positionMaxFin || toucheNonGeree) return;
var scrollNext = e.detail > 0 || e.wheelDelta < 0 || e.keyCode == 39 || e.keyCode == 40,
targetElement = clicked ? document.getElementById(cur.hash.substring(1)) : allSections[scrollNext ? currentIndex+1 : currentIndex-1],
targetIndex = elementIndex(allSections, targetElement);
currentIndex = targetIndex;
clicked = false;
firstSection.style.marginLeft = "-"+ (currentIndex * 100) + '%';
}
for(var i=0, l=navLinks.length; i<l; i++){
addEvent(navLinks[i], "click", function(e){
clicked = true;
scrollSection(e);
}, false);
}
addEvent(document, "DOMMouseScroll", scrollSection, false);
addEvent(document, "mousewheel", scrollSection, false);
addEvent(document, "keyup", scrollSection, false);
</script>
</body>
</html>
EDIT: erreur de copie.[/i][/i]
REEDIT : il y a un problème en copiant le code directement du forum, je ne sais pas pk
Modifié par Zelalsan (27 Sep 2013 - 11:35)