Поменять изображение при загрузке страницы - PullRequest
Новая
       6

Поменять изображение при загрузке страницы

0 голосов
/ 07 марта 2012

простой вопрос, который я думаю, но не тот, который я могу найти много на уме, я не слишком хорош в 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" />

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

Любая помощь с благодарностью.

Ответы [ 3 ]

1 голос
/ 07 марта 2012

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

0 голосов
/ 07 марта 2012

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

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

var d;

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

    $(this).delay(d).fadeIn(1000, function() {
        $(this).fadeOut(1000);
    });
});​
0 голосов
/ 07 марта 2012

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

Вам также нужен только один 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). Для тех браузеров вам нужен запасной вариант с помощью куки. </p>

...