如何在首页加载而不是后续加载时显示图像
[英]How to make an image display on first page load, but not subsequent loads
问题描述
I am running three photos in a js slideshow function, and I'm wondering if it's possible to have the first image in the slideshow display only when the side is FIRST loaded, but not when an user navigates to other pages in the site. 
我正在js幻灯片功能中运行三张照片，我想知道是否只有在首先加载侧面时才能在幻灯片中显示第一张图像，而当用户导航到站点中的其他页面时是否可以显示。 If possible, I would like subsequent page loads to begin at the second or third image in the slideshow. 如果可能的话，我希望后续页面加载从幻灯片显示的第二张或第三张图片开始。
$(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: 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>
2 个解决方案
解决方案1
0 已采纳 2015-05-26 21:41:52
Storing data in the browser from previous page loads is pretty complicated and time consuming for a task like this. 对于这样的任务，从以前的页面加载中将数据存储在浏览器中非常复杂且耗时。
Another option would be to set the carousel to display a different image based on which page it's being loaded on. 另一个选择是将轮播设置为根据要加载的页面显示不同的图像。
First, you can add a data attribute to a consistent element in each of your pages like this: 首先，您可以将数据属性添加到每个页面中的一致元素中，如下所示：
<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>
The, you can write some javascript to check that attribute on page load and set the carousel image number accordingly. 您可以编写一些JavaScript来检查页面加载时的该属性，并相应地设置轮播图片编号。 Something like this: 像这样：
var startingSlide = $('body').attr('data-slideNum');
Which, in this case would set 'startingSlide' equal to '2'. 在这种情况下，会将“ startingSlide”设置为“ 2”。
解决方案2
0 2015-05-26 22:46:41
Maybe you could use jQuery Cookie. 也许您可以使用jQuery Cookie。 https://github.com/carhartl/jquery-cookie https://github.com/carhartl/jquery-cookie
On page load, check if the cookie is set, if not display the image and set it, if it is set don't do anything (assuming image is hidden by default). 在页面加载时，请检查是否设置了cookie，是否不显示图像并进行了设置（如果已设置），则不执行任何操作（假设默认情况下图像是隐藏的）。
Something like this: 像这样：
if($.cookie('image') == undefined)
$('#image').show();
$.cookie('image', 'shown');
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.