Как изменить изображения с помощью jquery с помощью .load()

Question

У меня есть список изображений. Когда загрузка страницы каждый раз, когда я хочу показать следующее изображение в серии, и когда она перезагружается снова, я хочу изменить следующее изображение и т. Д.

Пожалуйста, предложите мне решение с помощью jQuery.

Спасибо

Answer 1

Вы должны рассмотреть возможность использования на стороне сервера технологии, чтобы сделать это. Однако это можно сделать достаточно легко с помощью jQuery или даже без библиотеки Javascript.

Используя куки-файлы, мы можем сохранить текущий счетчик изображений, который затем можно использовать для доступа к массиву URL-адреса изображения, который используется для изменения изображения при загрузке страницы. Используя the cookie script from QuirksMode, у нас есть сценарий, который выглядит следующим образом:

var images = ['img1.png', 'img2.png', 'img3.png', 'img4.png' ...], 
    imageCount = parseInt(readCookie('image'), 10); 

if(isNaN(imageCount)) imageCount = 0; 

$('#thumbnail').attr('src', images[imageCount % images.length]); 
createCookie('image', imageCount + 1, 30); 

Если вы используете ванильный Javascript, заменить 6-й линию с этим:

document.getElementById('thumbnail').src = images[imageCount % images.length]; 

посмотреть демо этого сценария здесь: http://www.jsfiddle.net/yijiang/2cqqt/

Answer 2

Предлагаю вам использовать цикл плагинов. Это так просто, как это:

$('.slideshow').cycle({ 
     fx: 'fade' 
    }); 

http://jquery.malsup.com/cycle/

Или, если вы хотите: jcarousel карусель

http://sorgalla.com/jcarousel/