Hoy vi la imagen deslizante escrita por otra persona. Se veía genial. Al leer el código fuente, parecía un poco difícil. Entonces imité y escribí uno. El efecto fue el mismo que la página web original, pero mi propio código JS es simple en lógica y debe mejorarse.
PD: Escribí un carrusel hace dos días, y esa compatibilidad no es buena. Cuando escribí esta página web hoy, también seguí esta idea y corrí muy bien en Google Chrome. No se pueden implementar muchas funciones de Firefox. Debido a que Wrap-panel usa posicionamiento absoluto, la traducción de traducción se cambia a la izquierda. Después de los cambios, cada navegador funciona bien.
El código específico es el siguiente
Código HTML (sin comentarios escritos)
<div> <h1> parallax slider </h1> <div> <div> <div id = "bg_1" style = "izquierda: 0px;"> </div> <div ID = "bg_2" style = "izquierda: 0px;"> <//divi = "bg_2" style = "izquierda: 0px;"> </iv> <iv> <iv> <img id " estilo = "izquierda: 0px;"> <div> <img id = "img_1" src = "images/1.jpg"> </div> <div> <div> <img src = "images/2.jpg"> </div> <viv> src = "imágenes/5.jpg"> </div> <div> <img src = "imágenes/6.jpg"> </div> </div> <div> <span id = "perv_btn"> </span> <span id = "next_btn"> </span> </div> <div> <div> <span Id = "next_btn"> </span </stiv> id = "show_small"> <ul> <li> <img src = "images/thumbs/1.jpg"> </li> <li> <img src = "images/thumbs/2.jpg"> </li> <li> <img src = "imágenes/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> </div> </div> </div> </div> </iv> </div>
Código CSS (léalo usted mismo):
* {margen: 0; relleno: 0; } html, cuerpo, .container {ancho: 100%; Altura: 100%; Font-Family: 'Microsoft Yahei'; } .Container {Background-Color: #222; desbordamiento-x: oculto; } .Container H1 {Font-size: 50px; Color: #ccc; Text-Align: Center; Font-peso: más audaz; Altura: 120px; Línea de altura: 120px; } .wrap {posición: relativo; Ancho: 600%; Altura: 400px; Border-Top: 10px Solid #333; Border-Bottom: 10px Solid #333; margen-top: 20px; } .bg {posición: absoluto; Ancho: 100%; Altura: 100%; Izquierda: 0; arriba: 0; -Webkit-transición: todos 1s; -Moz-transición: todos 1s; -ms-transición: todos 1s; -o-transición: todos 1s; -o-transición: todos 1s; Transición: todos 1s; } .bg-1 {fondo: url (imágenes/bg1.png); } .bg-2 {fondo: url (imágenes/bg2.png); } .bg-3 {fondo: url (imágenes/bg3.png); } .wrap-panel {posición: absoluto; Ancho: 100%; Altura: 100%; -WebKit-Transition: todos 1s; -Moz-Transition: todos 1s; -Ms-Transition: todos 1s; -O-transición: todos 1s; Transición: todos 1s; } .panel {ancho: 16.66%; Altura: 100%; flotante: izquierda; } .panel img {display: block; margen: 0 auto; margen-top: 35px; Border-Radius: 10px; borde: 10px sólido RGBA (143, 143, 143, 0.6); } .Navigation-Button Span: Hover {Opacidad: 0.8} .Perv-Button, .Next-Button {Position: Absolute; Ancho: 30px; Altura: 60px; Color de fondo: #344133; Border-Radius: 10px; cursor: puntero; Opacidad: 0.4; } .Perv-Button {fondo: #000 URL (Images/Prev.png) Center Center No-Repeat; } .Next-Button {fondo: #000 url (imágenes/next.png) centro central centro sin repetición; } .show-small {posición: absoluto; Ancho: 680px; Abajo: 20px; } .show-small ul {list-style: none; } .show-small ul li {float: izquierda; margen: 0 10px; borde: 5px sólido #fff; Opacidad: 0.7; cursor: puntero; -webkit-transition: todos .3s; -Moz-Transition: todos .3s; -Ms-Transition: todos .3s; -O-transición: todos .3s; Transición: todos .3s; } .show-small ul li: hover {margin-top: -15px; }Código JS (pequeña demostración):
Window.Onload = function () {// Obtener el elemento var getDom = function (id) {return typeOf id === "cadena"? document.getElementById (id): id; } // Obtener el objeto 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; // Evento de enlace para elemento var addEvent = function (id, evento, fn) {var el = getdom (id) || documento; if (el.AdDeventListener) {El.AdDeventListener (evento, fn, falso); } else if (el.attachevent) {el.attachevent ('on' + evento, fn); }} function init () {// coloca el botón // la distancia izquierda del botón hacia adelante = la distancia izquierda de la imagen + borde prev.style.left = img.offsetleft + 10 + 'px'; // La distancia superior del botón hacia adelante = la distancia superior de la imagen + la mitad de la altura de la imagen - mitad del botón anterior next.style.left = img.offsetleft + img.clientwidth + 10 - next.clientwidth + 'px'; next.style.top = previo.style.top; // coloca el contenedor de imágenes pequeñas wwidth = document.documentelement.clientwidth || document.body.clientwidth; show_small.style.left = (wwidth - show_small.clientwidth)/2 + 'px'; } // función de procesamiento de imágenes pequeñas small_img () {// gire la imagen para (var i = 0; i <list.length; i ++) {// gire la dirección = math.pow (-1, parseInt (math.random ()*10)); list [i] .style = "transformar: rotate (" + (math.random ()*20*dirección) + "DEG)"; } list [0] .style.opacity = 1; } función solo_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; } // Cuando el navegador está zoom, window.onresize = function () {init (); } // ejecutar la función init (); small_img (); addEvent (anterior, 'click', function () {// cambia la var de la izquierda OldPos de wrap-panel OldPos = parseInt (wrap_panel.style.left); if (oldPos == 0) {// contenedor de imágenes de fondo de fondo BG_1.style.left = bg_2.style.tft = bg_3.style.left = wrap_panel -Width*(list.length -1) + 'px'; parseint (-(oldPos/wwidth + 1))*100) + 'px'; + 'px'; AddEvent (siguiente, 'Click', function () {// Cambia el Var OldPos izquierdo de Wrap-panel OldPos = parseInt (wrap_panel.style.left); if (oldPos == -wwidth*(list.length-1)) { / / Pan de fondo Pan Pan Pan Pan Container Container Contenedor 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'; parseint (-(OldPos/wwidth + 1))*500) + 'PX'; }Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.