如何在首页加载而不是后续加载时显示图像

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