Todos están familiarizados con el sitio web HAO123. No necesito decir más sobre los efectos específicos. Los amigos interesados pueden referirse a las representaciones. El siguiente editor compartirá con usted la idea de implementar el código. Por supuesto, puede agregar, modificar y eliminar adecuadamente el código de acuerdo con sus necesidades.
El código clave es el siguiente:
<! DocType html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> Imagen Carousel </title> <style> .warp {width: 600px; Height: 750px; posición: relativo; margen: 30px auto 0; overflow: hidden;}#box {width: 600px: 600pX; 750px; posición: absoluto; superior: 0px; izquierda: 0px; overflow: hidden;/*overflow-x: auto;*/}#box #con {width: 6000px; altura: 750px; overflow: hidden;}#con img {float: izquierda; width: 600px; altura: 750px;}#btnl# 0px; arriba: 366px; ancho: 36px; altura: 36px; fondo: url (imágenes/btnl.png) 0 0 no-repeat; cursor: pointer;}#btnr {posicion: absoluto; right: 0px; top: 366px; width: 36px; altura: 36px; fondo: urbrem (imágenes/btnr.png) 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 No-Repeat; cursor: pointer;}#num {posición: absoluto; fondo: 10px; izquierda: 148px; desbordamiento: hidden; list-style: none;}#num li {float: izquierda; margin: 0 5px; font-size: 16px; line-theight: 25px; altura: 25px; width: 25px; fondo: #ccc; centro; cursor: pointer;}#num li.select {Background-Color: verde; color: blanco;} </ystye> </head> <body> <div> <div id = "box"> <div id = "con"> <img src = "Images/meinv1.jpg"> <img src = "Images/meinv2.jpg"> <imgg " src = "imágenes/meinv3.jpg"> <img src = "Images/meinv4.jpg"> <img src = "Images/meinv5.jpg"> <img src = "Images/meinv6.jpg"> </div> <div it = "btnl"> </div> <divi = "btnr" </diviv " id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <script> var box = document.getElementByid ('box'); var con = document.getElementByid ('con'); var '); imgs=con.getElementsByTagName('img');var btnL=document.getElementById('btnL');var btnR=document.getElementById('btnR');var num=document.getElementById('num');var lis=num.getElementsByTagName('li');var timer1=null,timer2=null;var imgw = imgs [0] .clientWidth; var x = 0; function imgscroll () {// Image Switch var start = box.scrollleft; var end = imgw*x; var change = end-start; var minstep = 0; var maxstep = 30; var; StepLength = Change/MaxStep; ClearInterval (Timer2); Timer2 = SetInterval (function () {minstep ++; // Console.log (minstep); if (minstep> = maxstep) {clearinterval (timer2);} start+= StepLength; box.scrollleft = start;}, 20) for (var i = 0; i ++) {lis [i] .classname = 'none';} lis [x] .classname = 'select';} function Move () {// desplazamiento predeterminado a la izquierda cada 3 segundos ClearInterval (timer1); timer1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0;} imgs = 0; btnr.OnClick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0;} imgscroll (); mude ();} btnl.oncclick = function () {clearinterval (temporizador1); x-; if (x <0) {x = imgs.length-1;} imgscroll (); mude ();} for (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .Encclick = function () {x = this.index; imgscroll (); Move ();}}} </script> </body> </html>Lo anterior es el efecto de la imagen del carrusel de la página de navegación JS IMitation HAO123 presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!