Como mostrado na figura.
O efeito de comutação de imagem é simples de implementar e tem boa compatibilidade.
A página HTML é a seguinte
A cópia do código é a seguinte:
<div>
<div id = "focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/" Target = "_ Blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-End Wrapper->
</body>
estilo CSS
A cópia do código é a seguinte:
<style type = "text/css">
* {margem: 0; preenchimento: 0;}
corpo {tamanho da fonte: 12px; Cor:#222; Fonte-família: Verdana, Arial, Helvetica, Sans-Serif; Antecedentes:#f0f0f0;}
.clearfix: após {content: "."; exibição: bloco; altura: 0; claro: ambos; Visibilidade: Hidden;}
.clearfix {zoom: 1;}
ul, li {estilo de lista: nenhum;}
img {borda: 0;}
.Wrapper {Width: 800px; margem: 0 automático; Botting-Bottom: 50px;}
/ * QQSHOP Foco */
#focus {width: 800px; Altura: 280px; estouro: oculto; Posição: relativa;}
#focus ul {altura: 380px; Posição: Absoluto;}
#focus ul li {float: esquerda; Largura: 800px; Altura: 280px; estouro: oculto; Posição: relativa; Antecedentes:#000;}
#focus ul li div {posição: absoluto; Overflow: Hidden;}
#focus .btnbg {posição: absoluto; Largura: 800px; Altura: 20px; Esquerda: 0; Inferior: 0; Antecedentes:#000;}
#focus .btn {Posição: Absolute; Largura: 780px; Altura: 10px; preenchimento: 5px 10px; Direita: 0; Inferior: 0; Alinhamento de texto: certo;}
#focus .btn span {display: inline-block; _display: inline; _Zoom: 1; Largura: 25px; Altura: 10px; _font-size: 0; margem-esquerda: 5px; Cursor: Ponteiro; Antecedentes: #fff;}
#focus .btn span.on {background: #fff;}
#focus .prenext {width: 45px; Altura: 100px; Posição: Absoluto; Top: 90px; Antecedentes: URL (img/sprite.png) sem repetição 0 0; Cursor: Ponteiro;}
#focus .pre {esquerda: 0;}
#focus .next {direita: 0; Posição de fundo: Top direito;}
</style>
Script JS
A cópia do código é a seguinte:
$ (function () {
var swidth = $ ("#focus"). width (); // Obtenha a largura do mapa de foco (área de exibição)
var len = $ ("#foco ul li"). Comprimento; // Obtenha o número de imagens de foco
var índice = 0;
var pictimer;
// O código a seguir adiciona o botão numérico e a barra translúcida atrás do botão, bem como dois botões na página anterior e na próxima página
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
for (var i = 0; i <len; i ++) {
btn += "<span> </span>";
}
btn += "</div> <div class = 'pré -next pre'> </div> <div class = 'prenext a seguir'> </div>";
$ ("#focus"). Appender (BTN);
$ ("#focus .btnbg"). css ("opacidade", 0,5);
// Adicione um slide do mouse no evento para o botão pequeno exibir o conteúdo correspondente
$ ("#focus .btn span"). css ("opacidade", 0,4) .mouseEnter (function () {
índice = $ ("#focus .btn span"). índice (this);
showpics (índice);
}). Eq (0) .Trigger ("MouseEnter");
// Página anterior e Processamento de transparência da próxima página
$ ("#focus .prenext"). CSS ("opacidade", 0,2) .Hover (function () {
$ (this) .stop (verdadeiro, falso) .animate ({"opacidade": "0.5"}, 300);
}, function () {
$ (this) .Stop (true, false) .animate ({"opacidade": "0.2"}, 300);
});
// botão de página anterior
$ ("#focus .pre"). Clique (function () {
índice -= 1;
if (index == -1) {index = len - 1;}
showpics (índice);
});
// Próximo botão de página
$ ("#focus .next"). Clique (function () {
índice += 1;
if (index == len) {index = 0;}
showpics (índice);
});
// Este exemplo está rolando para a esquerda e para a direita, ou seja, todos os elementos Li estão flutuando à esquerda na mesma linha; portanto, a largura dos elementos periféricos UL precisa ser calculada aqui.
$ ("#focus ul"). CSS ("largura", swidth * (len));
// A reprodução automática para quando o mouse desliza na imagem do foco e começa quando o mouse desliza.
$ ("#focus"). hover (function () {
ClearInterval (pictimer);
}, function () {
pictimer = setInterval (function () {
showpics (índice);
índice ++;
if (index == len) {index = 0;}
}, 4000); // Este 4000 representa o intervalo de reprodução automática, unidade: milissegundos
}). Trigger ("mouseleave");
// Mostre a função de imagem, exiba o conteúdo correspondente de acordo com o valor do índice recebido
função showpics (index) {// switch comum
var nowleft = -Index*swidth; // Calcule o valor esquerdo do elemento UL com base no valor do índice
$ ("#focus ul"). Stop (verdadeiro, falso) .animate ({"esquerda": Nowleft}, 300); // role o elemento UL através do Animate () para a posição calculada
// $ ("#focus .btn span"). removeclass ("on"). eq (index) .addclass ("on"); // Alterar para o efeito selecionado para o botão atual
$ ("#foco .btn span"). Stop (verdadeiro, false) .animate ({"opacidade": "0,4"}, 300) .eq (index) .Stop (true, false) .animate ({"opacidade": "1"}, 300); // Alterar para o efeito selecionado para o botão atual
}
});
Utilizado fotos de troca de esquerda e direita