如何在第一页加载时显示图像，但不在后续加载时显示

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

如何在第一页加载时显示图像，但不在后续加载时显示

How to make an image display on first page load, but not subsequent loads

javascript

jquery

pageload

slideshow