Todo mundo está familiarizado com o site HAO123. Não preciso dizer mais sobre os efeitos específicos. Amigos interessados podem se referir às renderizações. O editor a seguir compartilhará com você a ideia de implementar o código. Obviamente, você pode adicionar, modificar e excluir adequadamente o código de acordo com suas necessidades.
O código -chave é o seguinte:
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <title> picture carousel </title> <style> .warp {width: 600px; absoluto; topo: 0px; esquerda: 0px; estouro: Hidden;/*Overflow-x: Auto;*/}#Box #Con {Width: 6000px; Hight: 750px; Overflow: Hidden;}#con 36px; altura: 36px; fundo: url (imagens/btnl.png) 0 0 sem repetição; cursor: ponteiro;}#btnr {posição: absoluto; direita: 0px; top: 366px; largura: 36px; altura: 36px; fundo: url; Pointer;}#num {Posição: Absoluto; inferior: 10px; esquerda: 148px; Overflow: Hidden; estilo de lista: nenhum;}#num li {float: esquerda; margem: 0 5px; font-size: 16px; linha-height: 25px; hight: 25px; 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"> <mi src = "imagens/meinv4.jpg"> <img src = "imagens/meinv5.jpg"> <img src = "imagens/meinv6.jpg"> </div> <div id = "btnl"> </div> <div = "btnr"> </div> <ul id = "num"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> <li> 6 </li> </ul> </div> <cript> var box = document.getElementById ('caixa'); var con = document.GetEleMentbyId (" imgs = con.getElementsByTagName ('img'); var btnl = document.getElementById ('btnl'); var btnr = document.getElementById ('btnr'); var num = document.getElementById ('num'); var lis = timeLementMymentsByGName ( 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 end; var minstep = 0; var maxstep = 30; var; var; StepLength = alteração/maxStep; ClearInterval (timer2); timer2 = setInterval (function () {minstep ++; // console.log (minstep); if (minstep> = maxStep) {clearInterval (timer2);} start+= standngth; {lis [i] .className = 'None';} 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.lngth) {x = x 0; lis.length; btnr.OnClick = function () {clearInterval (timer1); x ++; if (x> = imgs.length) {x = 0;} imgscroll (); move ();} btnl.OnClick = function () {clearInterval (timeer1); x-se (x <0) {x = imgs.length-1;} imgscroll (); move ();} para (var i = 0; i <lis.length; i ++) {lis [i] .index = i; lis [i] .onclick = function () {x = this.index; imgscroll ();O exposto acima é o efeito carrossel da imagem da página de navegação JS imitação HAO123 apresentada a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!