ページの読み込みスワップイメージ

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を使用しますが、この例では、クッキーの値を使用しています1つだけを表示するためにすべての画像を読み込む必要はありません。目的の画像URLを計算し、javascriptを使用して適切なURLの画像タグを作成し、その画像のみを読み込むことができます。

Answer 2

最後に表示された画像を覚えておくには、localStorage/sessionStorageまたはcookieまたはajaxリクエストを使用する必要があります。

また、 -Tagの1つだけ必要です。ここで、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); 
    }); 
});​