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 = "image/1.jpg"/> </div> <div> <img src = "image/2.jpg"/> </div> <div> <img src = "image/3.jpg"/> </div> <div> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div>> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </s> </s> </div> </div> </div>
Código CSS:
* {preenchimento: 0px; margem: 0px;}. swapimg {posição: absoluto; } .btn {posição: absoluto; Altura: 90px; Largura: 60px; Antecedentes: RGBA (0,0,0,0,5);/*Defina a cor do fundo como preto e a transparência é 50%*/ cor: #ffffff; Alinhamento de texto: centro; altura da linha: 90px; Size da fonte: 40px; TOP: 155px;/*Altura da imagem 400/2-45*/cursor: ponteiro; /*display:none ;*/}.btnright {Esquerda: 840px;/*Largura da imagem 900 Largura de Navigação 60*/}#guias {Position: Absolute; TOP: 370px; margem-esquerda: 350px;}. guia {altura: 20px; Largura: 20px; Antecedentes:#05E9E2; altura de linha: 20px; Alinhamento de texto: centro; Size da fonte: 10px; flutuar: esquerda; Cor: #ffffff; Margem-direita: 10px; Radio de fronteira: 100%; Cursor: Pointer;}. BG {Background:#00FF21;}Código JS:
/// <referência path = "_ references.js"/> var i = 0; // variável global // Defina uma variável para obter o processo de carrossel var time; $ (function () {// 1. Após o carregamento da página, encontre o primeiro objeto com a classe igual para trocar e deixá -lo exibir. $ (". // como parar o mouse é colocado? (i == 0) {i = 6; function show () {//$("#allswapimg").hover(function () // {// $ (". btn"). show (); //}, function () // {// $ (". // Fadein (300) desaparece, Fadeout (300) desaparece, o tempo de filtragem 0,3s $ (". swapimg"). Eq (i) .Fadein (300) .Siblings (). $ (". TAB"). Eq (i) .Addclass ("BG"). SiBlings (). RemoveClass ("bg");} function ShowTime () {time = setInterval (function () {i ++; if (i == 6) {// Há apenas 6 figuras, para que eu não seja possível exceder 6. }, 3000);}O exemplo acima de simplesmente realizar o efeito das imagens de carrossel é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.