Este artigo compartilha o código específico para o uso do JS para criar efeitos de carrossel na página inicial de sites em geral para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> imagem carousel </title> <style> .warp {width: 600px; Altura: 750px; Posição: relativa; margem: 30px automático 0; estouro: oculto; } #Box {Width: 600px; Altura: 750px; Posição: Absoluto; Top: 0px; Esquerda: 0px; estouro: oculto; /*Overflow-x: Auto;*/} #box #con {width: 6000px; Altura: 750px; estouro: oculto; } #con img {float: esquerda; Largura: 600px; Altura: 750px; } #btnl {position: absoluto; Esquerda: 0px; topo: 366px; Largura: 36px; Altura: 36px; Antecedentes: URL (imagens/btnl.png) 0 0 No-repetir; Cursor: Ponteiro; } #btnr {position: absoluto; Direita: 0px; topo: 366px; Largura: 36px; Altura: 36px; Antecedentes: URL (imagens/btnr.png) 0 0 No-repetir; Cursor: Ponteiro; } #num {posição: absoluto; Inferior: 10px; Esquerda: 148px; estouro: oculto; estilo de lista: nenhum; } #num li {float: esquerda; margem: 0 5px; Size da fonte: 16px; altura de linha: 25px; Altura: 25px; Largura: 25px; Antecedentes: #ccc; Alinhamento de texto: centro; Cursor: Ponteiro; } #num Li.Select {Background-Color: Green; Cor: Branco; } </style> </ad Head> <body> <div> <div id = "box"> <div id = "con"> <img src = "imagens/meinv1.jpg"> <img src = "imagens/meinv2.jpg"> <img src = "imagens/meinv3.jpg"> <img.jpg "> <img src =" imagens/meinv3.jpg "> <impg"> src = "imagens/meinv5.jpg"> <img src = "imagens/meinv6.jpg"> </div> </div> <div id = "btnl"> </div> <div id = "btnr"> </div <x = "num"> <li> <li> <li> 2 2 </li> <li> 5 </li> <li> 6 </li> </div> <cript> var box = document.getElementById ('caixa'); 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 = nulo, timer2 = null; var imgw = imgs [0] .clientwidth; var x = 0; função imgscroll () {// switch de imagem var start = box.ScrollLeft; var end = imgw*x; var alteração = start final; var minstep = 0; var maxstep = 30; var squipngth = alteração/maxstep; ClearInterval (Timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxStep) {clearInterval (timer2);} start+= steplengn; } lis [x] .className = 'select'; } função move () {// rolagem padrão para a esquerda a cada 3 segundos ClearInterval (timer1); timer1 = setInterval (function () {x ++; if (x> = imgs.length) {x = 0;} imgscroll (); para (var i = 0; i <lis.length; i ++) {lis [i] .classname = 'none'; lis [x] .classname = ''; } move (); // Inicie a função de rolagem padrão; btnr.OnClick = function () {ClearInterval (timer1); x ++; if (x> = imgs.length) {x = 0; } imgscroll (); mover(); } btnl.OnClick = function () {ClearInterval (timer1); x--; 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>O efeito específico é baseado no efeito do carrossel da página de navegação HAO123. Você pode ir ao site para se referir a ele.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.