Este artículo comparte el código específico para usar JS para crear efectos de carrusel en la página de inicio de los sitios web generales para su referencia. El contenido específico es el siguiente
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Picture Carousel </title> <syle> .warp {width: 600px; Altura: 750px; Posición: relativo; Margen: 30px Auto 0; desbordamiento: oculto; } #box {ancho: 600px; Altura: 750px; Posición: Absoluto; arriba: 0px; Izquierda: 0px; desbordamiento: oculto; /*overflow-x: auto;*/} #box #con {width: 6000px; Altura: 750px; desbordamiento: oculto; } #con img {float: izquierda; Ancho: 600px; Altura: 750px; } #Btnl {posición: absoluto; Izquierda: 0px; arriba: 366px; Ancho: 36px; Altura: 36px; fondo: url (imágenes/btnl.png) 0 0 sin repetición; cursor: puntero; } #btnr {posición: absoluto; Derecha: 0px; arriba: 366px; Ancho: 36px; Altura: 36px; fondo: url (imágenes/btnr.png) 0 0 sin repetición; cursor: puntero; } #num {posición: absoluto; Abajo: 10px; Izquierda: 148px; desbordamiento: oculto; Estilo de lista: Ninguno; } #num li {float: izquierda; margen: 0 5px; tamaño de fuente: 16px; Línea de altura: 25px; Altura: 25px; Ancho: 25px; Antecedentes: #ccc; Text-Align: Center; cursor: puntero; } #num li.select {Background-Color: Green; Color: blanco; } </ystye> </head> <body> <bod> <div> <div id = "box"> <div id = "con"> <img src = "Images/meinv1.jpg"> <img src = "Images/meinv2.jpg"> <img src = "Images/meinv3.jpg"> <iMg src = "Images/meinv4.jpg"> <img src = "Images/meinv3.jpg"> <iMg src = "Images/meinv4.jpg"> <img src = "Images/meinv3.jpg"> <iMg src = "Images/meinv4. src = "imágenes/meinv5.jpg"> <img src = "imágenes/meinv6.jpg"> </div> </div> <div id = "btnl"> </div> <div ID = "btnr"> </div> <ul id = "num"> <li> 1 </li> <li> 2 </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <li> </li> <li> 5 </li> <li> 6 </li> </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 num = document.getElementById ('num'); var num = document.getElementById ('num'); var btnr = document.getElementById ('num'); var num = document.getElementById ('num'); 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 cambio var = 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) para (var i = 0; i <lis.length; i ++) {lis [i]. } 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;} imgscroll (); for (var i = 0; i <lis.length; i ++) {lis [i] .classname = 'none'; lis [x] .className = 'select';}}, 3000); } mover (); // Inicie la función de desplazamiento predeterminada; btnr.OnClick = function () {ClearInterval (Timer1); x ++; if (x> = imgs.length) {x = 0; } imgscroll (); mover(); } btnl.onclick = function () {clearInterval (timer1); incógnita--; if (x <0) {x = imgs.length-1; } imgscroll (); mover(); } para (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .Onclick = function () {x = this.index; imgscroll (); mover(); }} </script> </body> </html>El efecto específico se basa en el efecto del carrusel de la imagen de la página de navegación HAO123. Puede ir al sitio web para referirse a él.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.