Я только что написал js-код для слайд-шоу, используя только одно изображение (спрайт). С помощью js я меняю положение фона, чтобы изменить видимое изображение.
var first = true;
function galesprite() {
if (first) {
var bg_pos = '0px 0px';
first = false;
} else {
var bg_pos = $("#gmap").css('background-position');
}
/* Sub función para cuando termine la animación de fadeOut, sinó la foto se
* cambia antes y no crea el efecto deseado. */
$("#gmap").fadeOut(1000, function() {
var xy = bg_pos.split(' ');
var y = xy[1].split('px');
var newy = parseInt(y) + 200;
var bgpos = xy[0] + ' ' + newy + 'px';
$('#gmap').css('background-position', bgpos);
$("#gmap").fadeIn(1000);
setTimeout('galesprite()', 4000);
});
}
И это затронуло HTML. С классом CSS, который помещает фоновое изображение, набор вертикальных изображений. Каждое изображение имеет высоту 200 пикселей.
<div id="gmap"></div>
#gmap {
height: 200px;
width: 270px;
background-image: url('../images/diapositiva-home/surf.jpg');
background-position: 0px 0px;
}
То, что я делаю, - это циклическое увеличение фоновой позиции Y для div. Так что, похоже, что меняется изображение.
Идея состоит в том, чтобы минимизировать время загрузки страницы, используя спрайт вместо загрузки 10 изображений.
Вы видите что-нибудь, что я мог бы улучшить? Спасибо.