Question

我正在js幻灯片放映功能中运行三张照片，我想知道是否可以在侧面加载FIRST时在幻灯片显示中显示第一张图像，而不是当用户导航到其他页面时现场。如果可能，我希望后续页面加载从幻灯片中的第二或第三个图像开始。

$(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 个答案: