Question

我正在制作纯粹的HTML + JavaScript幻灯片。幻灯片显示在网站的侧边栏中，每个页面都有php，其中包含幻灯片侧边栏。没有侧边栏的唯一页面是主页面。

幻灯片放映正常。但是，可以理解的是，每次我使用侧边栏进入新页面时，幻灯片重新开始。有意义，因为javascript会重新加载每个新页面。

我想找到一些方法让幻灯片显示它的位置，以便当我转到新页面时，幻灯片放映继续在上一页停止的位置。我只能想到两个解决方案，一个似乎是蛮力，一个我不知道该怎么做：

将当前图像编号写入文件，并在每次读取时读取幻灯片加载。
以某种方式使用ajax，但我还没学会使用ajax （它会起作用吗？）。

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

这是我的代码：

simpleslideshow.html：

<html>

initializeSlideShow（）;

<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是一个实时版本，可能会或可能不会持续一段时间：

Answer 1

您可以在每次更改为新幻灯片时将当前幻灯片值保存到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幻灯片放映中的图像编号

1 个答案: