Question

我尝试使用幻灯片显示，静态文本内容以及（最多4个）标签中的更多文本内容开发页面模板。幻灯片显示不在选项卡面板区域中。

当页面加载时，我希望它能够播放＆＃34;主要部分＆＃34;幻灯片单击选项卡1时，我希望幻灯片显示切换到＆＃34; tab-1＆＃34;一组图像单击选项卡2时，＆＃34; tab-2＆＃34;一组图像...... 等...

我有一个朋友为我写的工作脚本，它允许我指定在页面加载时幻灯片中播放哪些图像，并确定页面加载时的随机播放顺序，交叉淡化图像和循环。

现在我喜欢在选项卡选择时触发相同的事情，并使用不同的指定图像。

所以我想：

页面加载：请参阅＆＃34;主要部分＆＃34;幻灯片显示指定图像，随机顺序，交叉渐变，循环
点击标签X：参见＆＃34;标签-X＆＃34;幻灯片显示其他指定图像，随机/淡入淡出/循环，代替以前运行的图像。
再次点击标签X：文字面板折叠，＆＃34;主要部分＆＃34;幻灯片重新启动 - 不必与其停止的位置相同或位于同一位置，只是该组图像。

像这样排序（JSFiddle）：

$(document).ready(function(){
    $('#thumbOne').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto";
    });
  });

  $(document).ready(function(){
    $('#thumbTwo').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto mainPhotoTwo";
    });
 });

  $(document).ready(function(){
    $('#thumbThree').on("click", function(){
        var main = document.getElementById("mainPhoto");
        main.className = "mainPhoto mainPhotoThree";
    });
  });

但缩略图=内容面板的标签，大图片=幻灯片。

这些标签基本上是寻呼机吗？我不想/需要/需要上传/下一个导航的幻灯片 - 只是不断流动...

我对js真的很陌生，虽然我可以看到大量代码正在做什么，但我无法理解我需要做些什么来完成这项工作

之前问过这个问题，可能不太清楚，但有更多细节：jQuery Responsive Tabs to start new slideshow/replace existing slideshow upon tab selection?

得到了this JSFiddle，但对于这些内容不熟悉，我没有在结果窗格中使响应标签正常工作 - 没有正确分离html / js，所以我把它留下来，大部分都是这样的功能......

幻灯片脚本位于我的JSFiddle上的HTML中。对于响应式标签（标签切换为基于媒体查询的手风琴）信息，请参阅here。

Answer 1

我的第一直觉是从JSON文档中重新填充幻灯片。幻灯片显示将读取选项卡的状态，并将相关内容加载到驱动幻灯片的阵列中。

我会尝试用一个小提琴来稍后证明这一点 - 此时我会编辑这个答案。

Answer 2

马修走在正确的轨道上。您只需要一个幻灯片，并且您希望使用每个选项卡的不同数据重新填充它。 实际上不需要多套标记或多个容器。

你的javascript也有很多问题 - 你只需要一个$（document）.ready函数，你可以在其中粘贴所有其他东西。如果您已经使用jQuery，那么做一个getElementById也没有充分的理由 - $（＆＃34; #mainPhoto＆＃34;）更好。

制作一堆指向你图像的幻灯片对象或数组（可能是马修的json文件，可能只是变量）

这就是我要做的假代码：

var slideShowOne = {
  images: ["img1.jpg", "img2.jpg", "img3.jpg"],
  name: "Cats"
};

var slideShowTwo = {
  images: ["img4.jpg", "img5.jpg", "img6.jpg"],
  name: "Dogs"
};

然后在您的点击操作中，您可以执行类似

的操作

$("#tabOne").click(function(){
    stop the slideshow;
    clear out the #slideshowContainer;
    slideShowOne.images.foreach(function(img)
        {$("#slideshowContainer").append("<img src='"+img+"'/>")})
    start the slideshow back up;
})

幻灯片旋转木马？

2 个答案: