페이지의 이미지를 스왑

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

페이지가로드 될 때마다 다음 이미지로 넘어갈 수 있도록 이전 클라이언트 상태 (일반적으로 쿠키 또는 로컬 저장소)를 저장해야합니다.

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;} 

자바 스크립트 :

// 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을 계산하고 자바 스크립트를 사용하여 적절한 URL로 이미지 태그를 만든 다음 해당 이미지 만로드 할 수 있습니다.

Answer 2

마지막으로 표시된 이미지를 기억하려면 localStorage/sessionStorage 또는 쿠키 또는 ajax 요청을 사용해야합니다.

-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"); 

주, 최신 브라우저에서이 유일한 작품, 로컬 스토리지 오래된 브라우저 (주로 IE = 7 <)에서 사용할 수 없습니다 때문입니다. 이러한 브라우저의 경우 쿠키를 통해 대체해야합니다.

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); 
    }); 
});​