Javascript 如何在第一页加载时显示图像，而不是在后续加载时显示图像_Javascript_Jquery_Slideshow_Pageload

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

javascript jquery

Javascript 如何在第一页加载时显示图像，而不是在后续加载时显示图像,javascript,jquery,slideshow,pageload,Javascript,Jquery,Slideshow,Pageload,我在js幻灯片功能中运行了三张照片，我想知道是否只有在第一次加载侧边时，才可能在幻灯片中显示第一张图像，而不是在用户导航到站点中的其他页面时。如果可能，我希望后续页面加载从幻灯片中的第二个或第三个图像开始 $(document).ready(function(){ $(function () { setTimeout(playSlideShow, 6400); function playSlideShow() { var currImgContainer = $(

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

在浏览器中存储以前加载的页面中的数据对于这样的任务来说非常复杂和耗时

另一个选项是将转盘设置为根据加载的页面显示不同的图像

首先，您可以向每个页面中的一致元素添加数据属性，如下所示：

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

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

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

在这种情况下，将“startingSlide”设置为“2”

也许您可以使用jQuery Cookie。

在页面加载时，检查cookie是否已设置，如果未显示图像并对其进行设置，如果已设置，则不要执行任何操作，假定默认情况下图像处于隐藏状态

大概是这样的：

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

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

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

我建议添加一个cookie或使用LocalStorages，你也应该通过JS加载图像，这更容易控制加载。这实际上给了我一个解决方案的想法，似乎正在做我希望它做的事情。一个限制是，考虑到这是一个博客，我不能像websiteurl.com/page/2那样对实际页面应用单独的属性。有什么想法吗？你不需要在URL中添加一个参数，只要该元素在博客的每个页面上始终存在，就可以添加到页面上的任何元素。您是否能够向任何元素添加属性，例如我在HTML中发布的数据slideNum属性？