如何在首頁加載而不是后續加載時顯示圖像

Question

我正在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>

Answer 1

對於這樣的任務，從以前的頁面加載中將數據存儲在瀏覽器中非常復雜且耗時。

另一個選擇是將輪播設置為根據要加載的頁面顯示不同的圖像。

首先，您可以將數據屬性添加到每個頁面中的一致元素中，如下所示：

  <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”。

Answer 2

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

在頁面加載時，請檢查是否設置了cookie，是否不顯示圖像並進行了設置（如果已設置），則不執行任何操作（假設默認情況下圖像是隱藏的）。

像這樣：

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

如何在首頁加載而不是后續加載時顯示圖像

問題描述

2 個解決方案

解決方案1
0 已采納 2015-05-26 21:41:52

解決方案2
0 2015-05-26 22:46:41

如何在首頁加載而不是后續加載時顯示圖像

問題描述

2 個解決方案

解決方案1 0 已采納 2015-05-26 21:41:52

解決方案2 0 2015-05-26 22:46:41

解決方案1
0 已采納 2015-05-26 21:41:52

解決方案2
0 2015-05-26 22:46:41