如何使在第一頁加載的圖像顯示，但沒有後續加載

我正在三張照片在一個js幻燈片功能，我想知道是否有可能有在幻燈片顯示的第一圖像僅在側是第一次加載，但不是當用戶導航到網站中的其他頁面時。如果可能，我希望隨後的頁面加載從幻燈片中的第二張或第三張圖片開始。如何使在第一頁加載的圖像顯示，但沒有後續加載

$(document).ready(function(){ 


    $(function() { 
    setTimeout(playSlideShow, 6400); 

    function playSlideShow() { 

    var currImgContainer = $('.showImg'); 
    if (!$(currImgContainer).hasClass('lastImg')) { 
     $('.showImg').removeClass('showImg').next().addClass('showImg'); 
     setTimeout(playSlideShow, 6400); 
    } 
    if (!$(currImgContainer).hasClass('secImg')) { 
     setTimeout(playSlideShow, 4500); 
    } 
    } 
}); 
});

HTML：從以前的頁面加載瀏覽器

<div class="slideShow" id="slideshow"> 
    <div class="showImg"> 
    <img src="img1.gif" /> 
    </div> 
    <div class="secImg"> 
    <img src="img2.gif" /> 
    </div> 
    <div class="lastImg"> 
    <img src="img3.gif"/> 
    </div> 
</div>

來源

2015-05-26 klynnftw

我會sugest增加一個cookie或者使用本地存儲 –

也應該通過加載JS的圖像，其更容易控制加載.. – reyaner

存儲數據是相當複雜和費時像這樣的任務。

另一種選擇是設置轉盤基於它被裝在哪個頁面顯示不同的圖像。

首先，你可以在每個頁面的數據屬性添加到一個一致的元素，像這樣：

<body data-slideNum="2"> 
    <div class="slideShow" id="slideshow"> 
    <div class="showImg"> 
     <img src="img1.gif" /> 
    </div> 
    <div class="secImg"> 
     <img src="img2.gif" /> 
    </div> 
    <div class="lastImg"> 
     <img src="img3.gif"/> 
    </div> 
    </div> 
    </body>

的，你可以寫一些JavaScript來檢查在頁面加載該屬性，並設置轉盤圖像編號相應。類似這樣的：

var startingSlide = $('body').attr('data-slideNum');

在這種情況下，它將設置'startingSlide'等於'2'。

來源

2015-05-26 21:41:52 jordajm

這其實也給我一個想法對於這樣的工作似乎正在做我到目前爲止所想做的事情。一個限制是我不能將一個單獨的屬性應用於實際頁面（如在websiteurl.com/page/2中），因爲這是一個博客。有什麼想法嗎？ – klynnftw

只要該元素在博客的每個頁面上始終存在，您就不需要爲該網址添加參數 - 僅限於該網頁上的任何元素。你是否有能力給任何元素添加屬性，比如我在HTML中發佈的data-slideNum屬性？ – jordajm

也許你可以使用jQuery的Cookie。 https://github.com/carhartl/jquery-cookie

在頁面加載時，檢查cookie是否設置，如果沒有顯示圖像並設置它，如果設置了，則不執行任何操作（假設圖像默認爲隱藏）。

事情是這樣的：

if($.cookie('image') == undefined) 
    $('#image').show(); 
    $.cookie('image', 'shown'); 
}

來源

2015-05-26 22:46:41 Skoua

如何使在第一頁加載的圖像顯示，但沒有後續加載

回答

相關問題