Como se muestra en la figura.
El efecto de conmutación de imágenes es simple de implementar y tiene una buena compatibilidad.
La página HTML es la siguiente
La copia del código es la siguiente:
<div>
<div id = "foco">
<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
La copia del código es la siguiente:
<style type = "text/css">
* {margen: 0; relleno: 0;}
cuerpo {Font-size: 12px; Color:#222; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; Antecedentes:#f0f0f0;}
.CLearFix: After {content: "."; Pantalla: bloque; Altura: 0; claro: ambos; Visibilidad: oculto;}
.clarfix {zoom: 1;}
UL, Li {estilo list: ninguno;}
img {border: 0;}
.wrapper {ancho: 800px; margen: 0 auto; Botón de relleno: 50px;}
/ * QQShop Focus */
#focus {ancho: 800px; Altura: 280px; desbordamiento: oculto; Posición: relativo;}
#focus ul {altura: 380px; Posición: Absoluto;}
#focus ul li {float: izquierda; Ancho: 800px; Altura: 280px; desbordamiento: oculto; Posición: relativo; Antecedentes:#000;}
#focus ul li div {posición: absoluto; desbordamiento: oculto;}
#focus .btnbg {posición: absoluto; Ancho: 800px; Altura: 20px; Izquierda: 0; Abajo: 0; Antecedentes:#000;}
#focus .btn {posición: absoluto; Ancho: 780px; Altura: 10px; relleno: 5px 10px; Derecha: 0; Abajo: 0; Text-Align: Right;}
#focus .btn span {display: inline-block; _display: en línea; _zoom: 1; Ancho: 25px; Altura: 10px; _font-size: 0; margen-izquierda: 5px; cursor: puntero; Antecedentes: #fff;}
#focus .btn span.on {fondo: #fff;}
#focus .prenext {ancho: 45px; Altura: 100px; Posición: Absoluto; Arriba: 90px; Antecedentes: URL (img/sprite.png) No-repeat 0 0; cursor: puntero;}
#focus .Pre {izquierda: 0;}
#focus .next {Right: 0; Posición de fondo: Top Right;}
</style>
guión js
La copia del código es la siguiente:
$ (function () {
var swidth = $ ("#focus"). width (); // Obtener el ancho del mapa de enfoque (área de visualización)
var len = $ ("#Focus Ul Li"). Longitud; // Obtener el número de imágenes de enfoque
índice var = 0;
var pickimer;
// El siguiente código agrega el botón numérico y la barra translúcida detrás del botón, así como dos botones en la página anterior y la página siguiente
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
para (var i = 0; i <len; i ++) {
btn += "<span> </span>";
}
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'Prenext Next'> </iv>";
$ ("#Focus"). Append (BTN);
$ ("#focus .btnbg"). CSS ("Opacidad", 0.5);
// Agregue una diapositiva del mouse en el evento para que el botón pequeño muestre el contenido correspondiente
$ ("#focus .btn span"). CSS ("Opacidad", 0.4) .MouseEnter (function () {
índice = $ ("#focus .btn span"). índice (this);
Showpics (índice);
}). eq (0) .grager ("mouseenter");
// Procesamiento de transparencia de la página anterior y del botón siguiente
$ ("#Focus .Prenext"). CSS ("Opacidad", 0.2) .Hover (function () {
$ (this) .stop (verdadero, falso) .animate ({"opacidad": "0.5"}, 300);
},función() {
$ (this) .stop (verdadero, falso) .animate ({"opacidad": "0.2"}, 300);
});
// botón de página anterior
$ ("#Focus .Pre"). Click (function () {
índice -= 1;
if (index == -1) {index = len - 1;}
Showpics (índice);
});
// botón de página siguiente
$ ("#focus .next"). Click (function () {
índice += 1;
if (index == len) {index = 0;}
Showpics (índice);
});
// Este ejemplo es desplazarse hacia la izquierda y hacia la derecha, es decir, todos los elementos de LI flotan a la izquierda en la misma fila, por lo que el ancho de los elementos UL periféricos debe calcularse aquí.
$ ("#Focus UL"). CSS ("Ancho", Swidth * (Len));
// La reproducción automática se detiene cuando el mouse se desliza en la imagen de enfoque y comienza cuando el mouse se desliza.
$ ("#Focus"). Hover (function () {
ClearInterval (picimer);
},función() {
picimer = setInterval (function () {
Showpics (índice);
índice ++;
if (index == len) {index = 0;}
}, 4000); // Este 4000 representa el intervalo de reproducción automática, unidad: milisegundos
}). Trigger ("MouseLeave");
// Mostrar la función de imagen, muestre el contenido correspondiente de acuerdo con el valor de índice recibido
función showpics (index) {// Switch ordinary
var nowleft = -index*swidth; // Calcule el valor izquierdo del elemento UL en función del valor del índice
$ ("#Focus UL"). Stop (verdadero, falso) .animate ({"izquierda": nowleft}, 300); // Desplácese el elemento UL a través de Animate () a la posición calculada
// $ ("#focus .btn span"). RemoveClass ("on"). Eq (índice) .addclass ("on"); // cambia al efecto seleccionado para el botón actual
$ ("#Focus .Btn Span"). Stop (True, False) .Animate ({"Opacidad": "0.4"}, 300) .eq (index) .stop (true, falso) .animate ({"opacidad": "1"}, 300); // cambia al efecto seleccionado para el botón actual
}
});
Usadas imágenes de conmutación izquierda y derecha