javascript - 记住 JavaScript 跨页幻灯片中的图像编号-6ren

javascript - 记住 JavaScript 跨页幻灯片中的图像编号

转载作者：行者123 更新时间：2023-12-02 18:04:51

32

4

我正在制作一个纯 html+JavaScript 幻灯片。幻灯片位于网站的侧边栏中，该网站为每个具有幻灯片侧边栏的页面加载了 php。唯一没有侧边栏的页面是主页。

幻灯片放映工作正常。然而，可以理解的是，每次我使用侧边栏进入新页面时，幻灯片都会重新开始。这是有道理的，因为每个新页面都会重新加载 JavaScript。

我想找到某种方法让幻灯片记住它的位置，这样当我进入新页面时，幻灯片就会从上一页中断的地方继续。我只能想到两种解决方案，一种看起来很暴力，另一种我不知道该怎么做:

将当前图像编号写入文件并在每次调用时读取它幻灯片加载。
不知何故使用ajax，但我还没学会使用ajax然而(它会起作用吗？)。

有什么建议吗？哦，拜托，我正在学习 javascript，接下来是 jQuery 和 ajax，但是...

这是我的代码:

simpleslideshow.html:

<html>

初始化SlideShow();

<table width="100">
  <tr>
    <td align="left"> <div id="previous">  <a href="javascript:change_image(-1)">Previous</a></div></td>
    <td align="right">  <div id="next"><a href="javascript:change_image(1)">Next</a></div></td>
    <td align="right"> <div id="auto"><a href="javascript:auto()">auto</a></div></td>
    <td align="right"> <div id="stop"><a href="javascript:stop()">stop</a></div></td>
  </tr>
</table>

<img src="" id="slideshow-image" width="400px" height="auto" style="display:block;"/>

simpleslideshow.js:

var inaterval_ID = 0;
var image_number = 0;       
var num_images = images_with_captions.length;


function change_image(increment){
  image_number = image_number + increment;
  image_number = (image_number + num_images) % num_images;
  var string = images_with_captions[image_number].source;
  document.getElementById("slideshow-image").src = string;
}

function initializeSlideShow() {
  //var string = images_with_captions[0].source;
  //document.getElementById("slideshow-image").src = string;
  auto();
}

function auto() {
  interval_ID = setInterval("change_image(1)", 1000);
}

function stop() {
  clearInterval(interval_ID);
}

image_caption_list.js:

var images_with_captions = new Array(
{
  source: "http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-435833.jpg",
  caption: "flower 1"
},
{
  source: "http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-511058.jpg",
  caption: "flower 2"
},
{
  source: "http://www.picgifs.com/clip-art/flowers-and-plants/flowers/clip-art-flowers-380016.jpg",
  caption: "flower 3"
}
);

编辑:我无法获得 jsfiddle上类。但是here是一个实时版本，可能会或可能不会一段时间:

最佳答案

每次更改到新幻灯片时，您都可以将当前幻灯片值保存到 cookie 或 localStorage，然后当您在新页面上启动幻灯片时，您可以读取上一张幻灯片值并从该幻灯片编号开始.

这里是阅读上一张幻灯片编号:

function initializeSlideShow() {
  // get prior slideshow num
  var lastSlideNum = +readCookie("lastSlideNum");
  // if there was a prior slideshow num, set that as the last one we used
  if (lastSlideNum) {
      image_number = lastSlideNum;
  }
  auto();
}

这里是在每次更改时保存幻灯片编号:

function change_image(increment){
  image_number = (image_number + increment) % num_images;
  // remember what slide we're on for subsequent page loads
  createCookie("lastSlideNum", image_number);
  var string = images_with_captions[image_number].source;
  document.getElementById("slideshow-image").src = string;
}

而且，这是一个简单的 cookie 库:

// createCookie()
// name and value are strings
// days is the number of days until cookie expiration
// path is optional and should start with a leading "/" 
//   and can limit which pages on your site can 
//   read the cookie.
//   By default, all pages on the site can read
//   the cookie if path is not specified
function createCookie(name, value, days, path) {
    var date, expires = "";
    path = path || "/";
    if (days) {
        date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + value + expires + "; path=" + path;
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

<小时/>

localStorage 实现(不会记住 IE8 之前的 IE 版本中的幻灯片)如下所示:

function initializeSlideShow() {
  // get prior slideshow num
  var lastSlideNum;
  // localStorage requires IE8 or newer
  // if no localStorage, then we just don't remember the previous slide number
  if (window.localStorage) {
      lastSlideNum = +localStorage["lastSlideNum"];
      // if there was a prior slideshow num, set that as the last one we used
      if (lastSlideNum) {
          image_number = lastSlideNum;
      }
  auto();
}

这里是在每次更改时保存幻灯片编号:

function change_image(increment){
  image_number = (image_number + increment) % num_images;
  // remember what slide we're on for subsequent page loads
  if (window.localStorage) {
      localStorage["lastSlideNum"] = image_number;
  }
  var string = images_with_captions[image_number].source;
  document.getElementById("slideshow-image").src = string;
}

关于javascript - 记住 JavaScript 跨页幻灯片中的图像编号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20185284/

32

4

0

文章推荐： javascript - PHP 文件不返回 .responseText 中的文本

文章推荐： Python:我需要随机生成6个数字，它们的总和等于指定的数字

文章推荐： c# - async 和await 关键字适用于什么？

assembly - 他们如何如此快地将十进制转换为十六进制(记住)？
我观察到很少有逆向工程师，他们将十进制转换为十六进制的速度如此之快。这简直太神奇了。我一直没有机会问他们。就我个人而言，我真的很讨厌这个转换，而且我总是使用计算器进行转换。我想知道这种转换是否有某种
Java - 记住/保存输入字段的程序
我有一个程序使用三个 JTextField 字段作为主要数据输入字段。我想要它，以便当用户终止程序然后再次打开它时，他们的最后一个条目仍将在字段中。我怎样才能做到这一点？我需要某种数据库还是有更简单
javascript - 记住 $(this) 是什么
我有以下脚本将 jquery 生成的对象的颜色更改为蓝色: $(".objects_list").live('click', function(event) { $(this).css("co
reactjs - 记住 React 中的所有内容是一种不好的做法吗？
这个问题在这里已经有了答案: Is it a good idea to memoize all of my react components? (2 个答案) 关闭去年。我知道使用 React.m
r - 记住 Rcpp 函数？
我在 R 中编写了一个递归函数并使用 memoise 来加速它。我试图通过在 Rcpp 中编写它然后记住 Rcpp 函数来进一步加快它的速度，但 R 函数更快。为什么会这样，有什么方法可以加快我的使用
iphone - NSUserDefaults 记住 View
我的应用程序包含几个 View ，我想在应用程序启动且用户尚未完成向导时显示一个小设置。我知道我可以使用 NSUserDefaults 实现此目的，但我不确定如何使其根据 NSUserDefaults
delphi - Delphi“记住”旧的DCU依赖关系
我正在从一台机器（相同版本的Delphi）开发应用程序。该应用程序的原始版本使用了TMS包中的TMoneyEdit组件。在移动项目时，我想删除对该产品的依赖。因此，在源代码中，我删除了TMoneyEd
sql - 如何“记住”一个值插入到SQLite的两个表？
我有一个触发器，希望将相同的随机值插入两个表中。我该怎么做呢？在TableAB上插入后创建触发器insertTrigger 开始插入TableA（id，num）VALUES（RANDOM（），1）
Javascript 记住 HTML 标签内容并在持续时间后替换
我有以下代码，通过 .swf 解决方案将服务器 IP 复制到客户端的剪贴板。正如您所看到的，它用成功的“已复制”消息替换了“复制 IP”按钮。我该如何让“复制 IP”按钮在显示成功消息 5 秒后返回，
javascript - 记住 GPS 权限状态
我正在使用 GPS 定位功能，问题是权限弹出窗口一遍又一遍地出现(每次新的网址刷新/按 F5 键)。我如何记住用户在浏览器中选择的状态(已批准或已拒绝)。 if (navigator.geoloca
javascript - 记住 "click"之前的原始状态
有一个按钮(实际上有很多)，它有一个事件处理程序: el.onclick = function(){ if(this.className.indexOf("minimized") != -1)
javascript - 记住 JavaScript 跨页幻灯片中的图像编号
我正在制作一个纯 html+JavaScript 幻灯片。幻灯片位于网站的侧边栏中，该网站为每个具有幻灯片侧边栏的页面加载了 php。唯一没有侧边栏的页面是主页。幻灯片放映工作正常。然而，可以理解的
javascript - 记住 Chrome 扩展中的大字符串
我想制作一个 Chrome 扩展程序，它将存储来自用户的潜在大型代码片段(以及代码片段的名称)并使用它们。我希望用户能够上传包含这些片段的文件(或者更好的是，将这些片段复制并粘贴到扩展程序选项页面的
methods - 记住 Groovy 中的成员方法
我有一个方法是 pure function并需要一段时间才能运行。我想记住这个方法，以便后续调用更快。我可以在 Groovy 的文档中看到，您可以通过以下方式内存闭包: foo = {…}.memoi
jquery - 记住 jQuery 中的触发器
[jQuery][1] 始终记住您的鼠标触发器，无论是单击还是悬停。因此，如果您鼠标输入和鼠标退出四次，它将执行该事件四次。如何让它“忘记”触发器，以便当我用鼠标输入和退出触发器时它只执行一次？编
unix - 记住 *nix 命令行参数
对于我的开发人员工作，我几乎整天都在 *nix shell 环境中工作，但似乎仍然无法记住我每天不使用的程序的名称和参数细节。我想知道其他“临时健忘症患者”是如何处理这个问题的。你有一个大的备忘单吗？
php - 记住 cookie 中的表单值以便稍后完成
我有一个表格，在客户填写各种表格后，我希望能够浏览网站，并返回表格并保持填写状态。我考虑过在浏览器的客户端中保留 cookie，您可能会推荐其他方法吗？关于代码，这里是 o 想到的 javascr
swift 。记住 Facebook 登录信息
好的，我已经实现了 Facebook 登录按钮: loginButton.readPermissions = ["public_profile", "email", "user_friends"] l
javascript - 记住 AngularJS 中选项卡之间的计数
我在移动应用程序中使用 AngularJS。用户能够将产品添加到订单中。但是我使用了不同的选项卡，以便用户可以在类别之间切换，并且对于每个类别，都会显示属于该类别的产品。这些产品可以添加到他/她的订单
android - 记住 ListView 中选中的复选框
我有一个使用自定义适配器、布局和模型类的 ListView (包含文本和复选框)。我想将选定的复选框保存在 sqlite 数据库中，以便当我导航到另一个 Activity 然后返回时，选定的复选框保持

首页

博学

6Ren·AI

商城

javascript - 记住 JavaScript 跨页幻灯片中的图像编号