Подкачка изображения на странице load

Question

простой вопрос, я думаю, но не тот, который я могу найти много, учитывая, что я не слишком хорош с jquery.

Я хотел бы просто образы, как, например:

<img class="banner-rotate" src="images/image1.gif" /> 
<img class="banner-rotate" src="images/image2.gif" /> 
<img class="banner-rotate" src="images/image3.gif" /> 
<img class="banner-rotate" src="images/image4.gif" />  

При загрузке страницы я хотел бы показать первое изображение затем цикл через них, чтобы при каждом обновлении страницы.

Любая помощь очень ценится.

Answer 1

Вам нужно будет сохранить предыдущее состояние клиента где-нибудь (обычно cookie или локальное хранилище), чтобы каждый раз при загрузке страницы вы могли перейти к следующему изображению. В этом примере используется значение куки:

HTML:

<img class="banner-rotate" src="images/image1.gif" /> 
<img class="banner-rotate" src="images/image2.gif" /> 
<img class="banner-rotate" src="images/image3.gif" /> 
<img class="banner-rotate" src="images/image4.gif" />  

CSS:

/* all banner images hidden by default */ 
.banner_rotate {display: none;} 

Javascript:

// cookie reading/writing library 
function createCookie(name,value,days) { 
    if (days) { 
     var date = new Date(); 
     date.setTime(date.getTime()+(days*24*60*60*1000)); 
     var expires = "; expires="+date.toGMTString(); 
    } 
    else var expires = ""; 
    document.cookie = name+"="+value+expires+"; path=/"; 
} 

function readCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1,c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
    return null; 
} 

function showNextBannerImage() { 
    var imgs = $(".banner-rotate"); 
    var index = 0; 
    var prev = readCookie("bannerIndex"); 
    if (prev) { 
     var num = parseInt(prev, 10); 
     if (!isNaN(num) && num < imgs.length - 1) { 
      index = num + 1; 
     } 
    } 
    imgs.eq(index).show(); 
    createCookie("bannerIndex", index, 365); 
} 

showNextBannerImage(); 

Примечание: Я использовал свой HTML, как вы показали, но вам не нужно загружать все изображения, чтобы показать только один. Вы можете вычислить нужный URL-адрес изображения и использовать javascript для создания тега изображения с соответствующим URL-адресом, а затем загрузить только одно изображение.

Answer 2

Вам нужно либо использовать localStorage/sessionStorage, либо файлы cookie или ajax Request, чтобы запомнить изображение, которое было в последний раз показано.

Вам также нужен только один img -Tag, где вы соответствующим образом меняете атрибут src.

простым решением было бы:

var index = localStorage.getItem("index"); 
var imageCount = 4; 
if (index === null){ 
    index = 1; 
    localStorage.setItem("index",index); 
} 
else{ 
    var newVal = index%imageCount+1; 
    localStorage.setItem("index",newVal); 
} 

$(".banner-rotate").attr("src","images/image"+index+".gif"); 

Обратите внимание, это работает только в современных браузерах, поскольку LocalStorage не доступен в старых браузерах (в основном IE < = 7). Для этих браузеров вам нужна резервная копия через файлы cookie.

Answer 3

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

Если да, то вы можете сделать это - http://jsfiddle.net/BHrHS/

var d; 

$("img.banner-rotate").each(function(i) { 
    d = i * 2000; 

    $(this).delay(d).fadeIn(1000, function() { 
     $(this).fadeOut(1000); 
    }); 
});​