English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Introducción
Probablemente todos estén familiarizados con el carrusel de diapositivas de imágenes, especialmente los basados en jQuery, hay una gran cantidad de plugins y códigos en línea, pero prácticamente ninguno cumple con los requisitos personales, por lo que quiero crear un carrusel de jQuery que cumpla con mis requisitos personales y que pueda resistir la prueba de la mayoría de los usuarios de Internet!
Enfoque
¿Por qué digo que otros algunos carruseles de imágenes en línea no cumplen con mis requisitos? ¿Qué son mis requisitos?
La mayoría de las prácticas de los plugins de carrusel de diapositivas de jQuery que se pueden encontrar en línea primero escriben el HTML de las imágenes y los enlaces, y luego controlan el ocultamiento y la visualización para mostrar el carrusel de imágenes actual. Pero para el usuario, siempre solo vemos una imagen actual, ¿por qué cargar las otras imágenes ocultas de antemano? ¿No es una pérdida de tiempo y esfuerzo? Por lo tanto, mi primer requisito es la carga por necesidad.
Generalmente colocamos el carrusel de imágenes en la página principal para mostrar, pero el contenido principal de la página principal debería ser los artículos actualizados recientemente, al menos no creo que la función de visualización de imágenes necesite ser incluida en el índice de búsqueda de los motores de búsqueda, por lo que mi segundo requisito es SEO.
implementar
Siguiendo estas dos necesidades, hice un DEMO, no duden en ver el código fuente de este DEMO, ¿han notado la diferencia? Sí, en el código fuente HTML de este DEMO, no ven ninguna imagen ni información relacionada, todo es cargado por JS, es decir, no puede ser rastreado por los rastreadores, y se carga una imagen a la vez con el cambio de imagen.
Aquí solo comparto mi escritura de JS, por favor, consulten el código fuente de HTML, no detallaré cada línea de código, los comentarios están muy claros.
$(function() {
var WangeSlide = (function() {
//configuración
var config = {
//tamaño del carrusel
width : 960,
height : 350,
//cambio automático
autoSwitch : true,
//tiempo de cambio automático (milisegundos)
interval : 6000,
//ruta de la imagen del carrusel
picPath : 'http://www.dowebok.com/demo/2014/93/img/',
//información de la imagen del carrusel: nombre del archivo de imagen / título de la imagen / enlace de la imagen
picInfo : [
['fullimage1.jpg', 'imagen1Aviso,'http://codepen.io/webstermobile/'],
['fullimage1.jpg', 'imagen2Aviso,'http://codepen.io/webstermobile/'],
['fullimage1.jpg', 'imagen3Aviso,'http://codepen.io/webstermobile/']
]
};
//Obtener información de la imagen
/**
* @param index valor de índice de la imagen
**/
var getImgInfo = function(index) {
var imgSrc = config.picPath + config.picInfo[index][0],
imgAlt = config.picInfo[index][3],
imgUrl = config.picInfo[index][4],
imgId = 'slide_' + (index+1).toString(),
imgHtml = '<li id="' + imgId + '">' +
' <a href="' + imgUrl +'" rel="external nofollow" title="[#0#]" class="pic">' +
' <img src="' + imgSrc + '" alt="[#0#]" class="slide_thumb" /'> +
' </a>' +
</li>',
slideTextHtml = '<a href="' + imgUrl + '" rel="external nofollow" title="[#0#]">' + imgAlt+ </a>';
return {
imgAlt : imgAlt,
imgUrl : imgUrl,
imgHtml : imgHtml,
slideTextHtml : slideTextHtml
}
};
//cargar y mostrar gradualmente la imagen después de que se haya cargado completamente
var fadeInImg = function(el, speed) {
//console.log(el)
el.find("img").load(function() {
el.find("img").addClass("loaded")
el.fadeIn(speed)
});
};
//cambio de imagen
/**
* @param index valor de índice de la imagen
* @param triggerCurEl nodo de elemento desencadenante actual
**/
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//si ya hay elementos correspondientes, mostrar elementos existentes
var panelLi = $('#panel ul li');
panelLi.hide();
$(slideIdEl).fadeIn('slow');
} else {
//si aún no hay elementos correspondientes, inyectar elementos
$(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
var panelLi = $('#panel ul li');
panelLi.hide();
//cargar imagen de visualización
fadeInImg($("#" +slideId), 'slow');
}
//obtener el texto alternativo de la imagen como información de visualización
$('#slide_text').html(getImgInfo(index).slideTextHtml);
//estado actual cur
$('#trigger ul li').removeClass('cur');
triggerCurEl.addClass('cur');
};
//carrusel
var slide = function() {
//establecer el tamaño del carrusel
$('#panel').css({
'width' : config.width + 'px',
'height' : config.height + 'px'
});
var result = getImgInfo(0).imgHtml
//inicializar el carrusel, cargar solo la información de la primera imagen
$('#panel ul').html($(result));
//cargar imagen de visualización
fadeInImg($('#slide_1), 500);
//injertar capa de fondo + contenedor de desencadenador + contenedor de texto de carrusel
var slideBg = '<div id="slide_bg"></div>',
trigger = '<div id="trigger"></div>',
slideText = '<div id="slide_text"></div>';
$('#panel').after(slideBg + trigger + slideText);
//obtener el texto alternativo de la imagen como información de visualización
$('#slide_text').html(getImgInfo(0).slideTextHtml);
//injertar nodo desencadenante
var triggerUl = $('<ul></ul>');
triggerUl.appendTo($('#trigger'));
for (var i=0, j=config.picInfo; i<j.length; i++) {
$('<li>' + (i+1).toString() +</li>').appendTo(triggerUl);
}
//estado actual cur
$('#trigger ul li').eq(0).addClass('cur');
//nodo desencadenante de clic
$("#trigger ul li").click(function(){
var index = $("#trigger ul li").index($(this))
//console.log(index)
imgSwitch(index,$(this))
})
//detener el cambio al pasar el ratón por encima
var goSwitch = true;
$('#panel').hover(
function() {goSwitch = false},
function() {goSwitch = true}
);
//cambio automático
if (config.autoSwitch) {
setInterval(function() {
if (goSwitch) {
//判断当前cur所在的索引值
var index = parseInt($('.cur','#trigger').text()) - 1;
if (index > (config.picInfo.length-2) {
index = -1;
}
imgSwitch((index+1), $('#trigger ul li:eq(' + (index+1) + ')'));
}
}, config.interval);
}
};
return {
//Inicialización
init : function() {
slide();
}
}
})();
WangeSlide.init();
})
Carga de red bajo demanda
Como se puede ver en la imagen, cuando la página se carga, se carga solo una imagen de slide antes de cambiar automáticamente o hacer clic para cambiar, lo que ahorra significativamente la carga de la página.
Ventajas
El mismo efecto, solo que el método de implementación es diferente. ¿No es muy molesto? ¿Qué ventajas tiene esto?
Por ejemplo, antes de la optimización, supongamos que las diapositivas de cambio en la página de inicio tienen5fotos, con una imagen promedio20K, es decir, tu página de inicio debe cargar al menos10Las imágenes 0K, y esto10¿Puedes garantizar que cada usuario verá las imágenes 0K? Si el usuario no las ve, ¿no es una pérdida de tiempo?10¿La velocidad de carga 0K?
Después de la optimización, al cargar por primera vez en la página de inicio, solo se necesita cargar una1Aproximadamente K, incluso innecesarias imágenes de carga, que se cargarán cuando el usuario haga clic en la siguiente imagen o cuando se alcance el tiempo configurado por el temporizador, ahorrando mucho tiempo de carga.1K?100K? Lo sabes.
Además, cargar las imágenes necesarias con JS también tiene una ventaja, es que en algunos navegadores de teléfono que no admiten JS, cargar 10Las imágenes 0K son una carga enorme para los carruseles de diapositivas que no pueden cambiar, y también reducirán significativamente la experiencia del usuario.