在頁面加載交換圖像

一個簡單的問題，我認爲但不是一個我可以找到很多關於baring我腦海裏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" />

在頁面加載我想通過他們爲了顯示第一個圖像，然後循環頁面的每次刷新。

任何幫助非常感謝。

來源

2012-03-07 matt-tyas

你能使用Cookie（即使我認爲這不是一個好主意，如果這是你必須把它的唯一的事情）？你可以使用一些本地存儲（但你必須在瀏覽器兼容性方面遇到麻煩）？你使用什麼服務器端環境（JSP？PHP？ASP.NET？）。某處您必須存儲最近查看的圖像索引。 – 2012-03-07 15:32:12

您需要將某個地方的以前的客戶端狀態（通常是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，你顯示了它，但您不必加載所有圖像就可以顯示一個圖像。您可以計算出所需的圖片網址，並使用javascript來創建帶有相應URL的圖片標籤，然後只加載該圖片。

來源

2012-03-07 15:37:51 jfriend00

您需要使用localStorage/sessionStorage或cookie或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）可用。對於那些瀏覽器，您需要通過cookie進行回退。

來源

2012-03-07 16:01:36 Christoph

這只是在每次頁面加載時將索引值增加1，並且一直保持不變。它沒有任何可用圖像的最大數量的意義，所以它可以在已經完成最後一個圖像時回到第一個圖像。 – jfriend00 2012-03-07 16:05:25

@ jfriend00 ty指出：-p你去。 – Christoph 2012-03-07 16:20:17

我想你並不是想要記住頁面刷新前顯示的最後一張圖片。你想要的只是簡單地循環瀏覽每個頁面加載的圖像。我對嗎？

如果是的話，你可以這樣做 - http://jsfiddle.net/BHrHS/

var d; 

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

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

來源

2012-03-07 17:07:55

在頁面加載交換圖像

回答

相關問題