Aujourd'hui, j'ai vu l'image coulissante écrite par quelqu'un d'autre. Ça avait l'air cool. Lors de la lecture du code source, cela semblait un peu difficile. J'ai donc imité et écrit un. L'effet était le même que la page Web d'origine, mais mon propre code JS est simple en logique et doit être amélioré.
PS: J'ai écrit un carrousel il y a deux jours, et cette compatibilité n'est pas bonne. Lorsque j'ai écrit cette page Web aujourd'hui, j'ai également suivi cette idée et j'ai très bien fonctionné sur Google Chrome. De nombreuses fonctions de Firefox ne peuvent pas être implémentées. Étant donné que Wrap Panel utilise un positionnement absolu, la traduction de traduis est changée en gauche. Après les modifications, chaque navigateur fonctionne bien.
Le code spécifique est le suivant
Code HTML (aucun commentaire écrit)
<div> <h1> parallaxe curseur </h1> <div> <div> <div id = "bg_1" style = "Left: 0px;"> </ div> <div id = "bg_2" style = "Left: 0px;"> </ div> <v> <v> <v> <v> <xg Id = "wrap_px;> </v> </v> style = "Left: 0px;"> <div> <img id = "img_1" src = "images / 1.jpg"> </ div> <v> <img src = "images / 2.jpg"> </ div> <v> <img src = " src = "images / 5.jpg"> </ div> <v> <img src = "images / 6.jpg"> </ div> </ div> <div> <span id = "perv_btn"> </ span> <span id = "next_btn"> </ span> </ div> <v> <pank id = "next_btn"> </ span> </ div> <pank id = "next_btn"> </pan id = "show_small"> <ul> <li> <img src = "images / thumbs / 1.jpg"> </li> <li> <img src = "images / thumbs / 2.jpg"> </li> <li> <img src = "images / thumbs / 3.jpg"> </li> <li> <img = " src = "images / thumbs / 4.jpg"> </li> <li> <img src = "images / thumbs / 5.jpg"> </ li> <li> <img src = "images / thumbs / 6.jpg"> </ li> </ul> </v> </v> </v> </v> </v> </v> </v> </ div>
Code CSS (lisez-le vous-même):
* {margin: 0; rembourrage: 0; } html, corps, .Container {largeur: 100%; hauteur: 100%; Font-Family: «Microsoft Yahei»; } .Container {background-Color: # 222; Overflow-X: Hidden; } .Container H1 {Font-Size: 50px; Couleur: #ccc; Texte-aligne: Centre; Police-poids: plus audacieux; hauteur: 120px; hauteur de ligne: 120px; } .wrap {position: relative; Largeur: 600%; hauteur: 400px; Border-top: 10px solide # 333; Border-Bottom: 10px solide # 333; marge: 20px; } .bg {position: absolue; Largeur: 100%; hauteur: 100%; à gauche: 0; en haut: 0; -Webkit-Transition: Tous 1s; -moz-transition: tous 1s; -ms-transition: tous 1s; -o-transition: tous 1s; -o-transition: tous les 1; Transition: Tous les 1; } .bg-1 {fond: url (images / bg1.png); } .bg-2 {background: url (images / bg2.png); } .bg-3 {background: url (images / bg3.png); } .Wrap-Panel {position: Absolute; Largeur: 100%; hauteur: 100%; -Webkit-Transition: Tous les 1; -Moz-Transition: Tous les 1; -ms-transition: tous les 1; -o-transition: tous les 1; Transition: Tous les 1; } .panel {largeur: 16,66%; hauteur: 100%; flottant: à gauche; } .panel img {affichage: block; marge: 0 auto; marge: 35px; Border-Radius: 10px; Border: 10px RGBA solide (143, 143, 143, 0,6); } .Navigation-Button Span: Hover {Opacity: 0.8} .perv-button, .Next-Button {position: absolue; Largeur: 30px; hauteur: 60px; Color d'arrière-plan: # 344133; Border-Radius: 10px; curseur: pointeur; Opacité: 0,4; } .perv-button {Background: # 000 URL (images / prev.png) centre central sans répétition; } .Next-Button {Background: # 000 URL (images / next.png) centre central central non répété; } .show-small {position: absolu; Largeur: 680px; En bas: 20px; } .show-small ul {list-style: Aucun; } .show-small ul li {float: gauche; marge: 0 10px; Border: 5px solide #fff; Opacité: 0,7; curseur: pointeur; -webkit-transition: tous .3s; -Moz-Transition: Tous .3s; -ms-transition: tous .3s; -o-transition: tous .3s; Transition: Tous .3S; } .show-small ul li: hover {margin-top: -15px; }Code JS (petite démo):
window.onLoad = function () {// Obtenez l'élément var getDom = function (id) {return typeof id === "String"? document.getElementyid (id): id; } // Obtenez l'objet var img = getDom ('img_1'); var prev = getDom ("perv_btn"); var next = getDom ("next_btn"); var wrap_panel = getDom ('wrap_panel'); var bg_1 = getDom ("bg_1"); var bg_2 = getDom ("bg_2"); var bg_3 = getDom ("bg_3"); var show_small = getDom ("show_small"); var list = show_small.getElementsByTagName ("li"); Var Wwidth; // Bind Event pour élément var addEvent = function (id, événement, fn) {var el = getDom (id) || document; if (el.addeventListener) {el.addeventListener (événement, fn, false); } else if (el.attachevent) {el.attachevent ('on' + événement, fn); }} fonction init () {// positionne le bouton // la distance gauche du bouton avant = la distance gauche de l'image + la bordure prev.style.left = img.offsetleft + 10 + 'px'; // la distance supérieure du bouton avant = la distance supérieure de l'image + la moitié de la hauteur de l'image - la moitié du bouton prev.style.top = img.offsettop + img.clientheight / 2 - prev.clientHeight / 2 + 'px'; next.style.left = img.offsetleft + img.clientwidth + 10 - next.clientwidth + 'px'; next.style.top = prev.style.top; // Positionnez le conteneur des petites images wwidth = document.documentElement.ClientWidth || document.body.clientwidth; show_small.style.left = (wwidth - show_small.clientwidth) / 2 + 'px'; } // Fonction de traitement de petite image small_img () {// Rotation de l'image pour (var i = 0; i <list.length; i ++) {// rotation direction = math.pow (-1, parseInt (math.random () * 10)); list [i] .style = "transform: rotate (" + (math.random () * 20 * direction) + "deg)"; } list [0] .style.opacity = 1; } fonction uniquement_one (el, num) {for (var i = 0; i <el.length; i ++) {el [i] .style.opacity = 0.7; } // console.log (num); el [num] .style.opacity = 1; } // Lorsque le navigateur est zoom, window.onresize = function () {init (); } // Exécuter la fonction init (); small_img (); addEvent(prev,'click',function() { // Change the left var oldPos of wrap-panel oldPos = parseInt(wrap_panel.style.left); if(oldPos == 0) { // Background pan picture container pan bg_1.style.left=bg_2.style.left=bg_3.style.left=wrap_panel.style.left = -Wwidth * (list.length-1) + 'px'; PARSEINT (- (OldPos / Wwidth + 1)) * 100) + 'PX'; 1)) * 500) + 'px'; addEvent (suivant, 'click', fonction () {// modifie le var oldpos gauche de wrap-panel oldpos = parseInt (wrap_panel.style.left); if (oldpos == -wwidth * (list.length-1)) {// back-back bg_1.style.left = bg_2.style.left = bg_3.style.left = wrap_panel.style.left = '0px'; bg_1.style.left = (oldpos - wwidth + parseInt (- (oldpos / wwidth + 1)) * 100) + 'px'; bg_2.style.left = (oldpos - wwidth + parseint ((oldpos / wwidth + 1) * 300) + 'px'; + parseInt (- (oldPos / wwidth + 1)) * 500) + 'px'; }Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.