1. Pontos -chave:
1. Quando a página é carregada, as imagens se sobrepõem e se empilham [posicionamento absoluto];
2. A primeira foto mostra, outros estão ocultos;
3. Defina o subscrito e defina a cor do subscrito para que ele se mova com a figura;
4. Mova o mouse para a imagem, exiba os ícones em movimento esquerdo e direito, afaste o mouse e continue para o carrossel;
2. Código de implementação:
Código HTML:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titlel) caroust = "text/html; charset = utf-8"/> <titel> <titlel, carous = "text/title; href = "css/lunbimg.css" rel = "Stylesheet"/> <script src = "js/jQuery-1.10.2.min.js"> </script> </script src = "js/lunbimg.js"> </script> </head> <body idan = " src = "imagem/1.jpg"/> </div> <div> <img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <d> <mg src = "image/4.jpg"/> </div> /> </div> <div> <img src = "imagem/6.jpg"/> </div> </div> <div> <</div> <div>> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </body> </html>
Código CSS:
* {preenchimento: 0px; margem: 0px;}. swapimg {posição: absoluto;}. 50%*/cor: #ffffff; text-align: centro; altura da linha: 90px; tamanho da fonte: 40px; topo: 155px;/*altura da imagem 400/2-45*/cursor: ponteiro;/*display: nenhum; {Posição: Absoluto; TOP: 370px; margem-esquerda: 350px;}. guia {altura: 20px; largura: 20px; fundo:#05E9E2; altura da linha: 20px; text-align: Centre; font-size: 10px; float: esquerda; cor: #ffffffff; margem-direita: 10px; radio de borda: 100%;Código JS:
/// <referência path = "_ references.js"/> var i = 0; // variável global // Defina uma variável para obter carrossel var time; $ (function () {// 1. Após o carregamento da página, encontre o primeiro objeto com classe igual ao swapimg, deixe -o exibir, seu elemento de irmãos é escondido $ (". Swapimg"). Eq (0) .Show (). Siblings (). Hide (); Showtime (); // Quando o mouse é colocado no subscrito para exibir a imagem, o mouse se afasta e continua a carrossel $ (". $ (this) .index (); show (); // Como parar após o mouse ser colocado? clearInterval (tempo); // Depois de clicar em -1if (i == 0) {i = 6;} i -; show (); showTime ();}); $ (". -1;} i ++; show (); ShowTime ();});}); function show () {//$("#allswapimg").hover(function () // {// $ (".; Fades in, Fadeout (300) desaparece, o tempo de filtragem 0,3s $ (". Swapimg"). Eq (i) .Fadein (300) .Siblings (). Fadeout (); $ (". setInterval (function () {i ++; if (i == 6) {// Existem apenas 6 imagens, então não posso exceder 6. Se eu for igual a 6, faremos com que seja igual à primeira figura i = 0;} show ();}, 3000);}O exposto acima é o código da implementação do diagrama de carrossel com base no JavaScript apresentado a você. 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!