С помощью jquery я могу вращать 6 jpgs лентикулярной последовательности взад и вперед, чтобы добиться того же результата анимационного gif; например, http://www.vicgi.com. Общий размер файла для 6 изображений составляет всего 233 КБ. Если бы это был анимированный GIF, было бы 11 кадров, и файл мог бы быть больше 1 МБ. Не говоря уже о том, что количество цветов ограничено 256 для GIF.
HTML
<!-- Reserve a div for showing the images with id=banner -->
<div class="row">
<img id="banner" src="images/first_image.jpg" class="img-responsive">
</div>
Javascript :
Добавьте этот код перед тегом конца тела, предположим, что вы связались с jquery cdn или загрузкой.
var images = [
"first_image.jpg",
"second_image.jpg",
"third_image.jpg",
"forth_image.jpg",
"fifth_image.jpg",
"sixth_image.jpg",
"fifth_image.jpg",
"forth_image.jpg",
"third_image.jpg",
"second_image.jpg",
]; // add the images if necessary
numImages = images.length,
index = 1; // start from the second image because first image is already in the HTML
function cycleImages() {
image = "images/" + images[index]; // assume all the images are store in the images sub-directory
$("#banner").attr("src", image); // set the src attribute of the <img tag to the image to be shown
index++; // advanced to the next image
if (index == numImages) index = 0; // recycle to the first image
}
$(function() { // start the rotation when document is ready
setInterval("cycleImages()", 800)
});