Javascript jQuery响应选项卡是否在选择选项卡时启动新幻灯片放映/替换现有幻灯片放映？

刚接触jQuery/javascript，但不太害怕。。。朋友帮我完成了下面的幻灯片脚本，我从github中提取了jellekralt的响应选项卡jQuery脚本

我有javascript、自动播放、交叉衰减的幻灯片，它以js确定的随机顺序（FWIW）循环每个页面的html文件中指定的图像

我的主要部分页面链接到子页面，每个子页面中的图像与主要页面的图像不同

但现在我选择使用响应选项卡jQuery代码来只显示主要部分页面，并使用选项卡打开显示子页面文本的面板。将每个主要部分和子部分保存在同一个html文件中，可以根据媒体查询断点从选项卡响应更改为手风琴，从而在桌面和移动设备上实现更清晰的导航和演示。。。当然，还有更少的页面

我希望断点后的选项卡或手风琴标题触发幻灯片中指定图像文件的更改，就像转到新的/单独的小节页面时一样，但我希望在保持在同一页面时发生这种情况

图像幻灯片不在/不能在每个选项卡中

我的基本html结构/div顺序是：

head
    body
        wrapper
            content container
                logo
                *[script] - slideshow
                main section info text
                main section nav (to other main section pages)
                *[script] - Responsive Tabs (subsection text displayed in div/panel triggered by tabs)
            [close content container]
        ([script]) (sticky) footer
        [close wrapper]
    [close body]

幻灯片区域的html非常简单fadein类在页面加载时触发幻灯片放映：

<div class="imagearea">
    <div class="fadein">
    </div>
</div>

幻灯片放映脚本：

<script>
$(function () {
   var randomize = function (array) {
       for (var i = array.length - 1; i > 0; i--) {
           var j = Math.floor(Math.random() * (i + 1));
           var temp = array[i];
           array[i] = array[j];
           array[j] = temp;
       }
       return array;
   };

   var assets = [{
        url: "images/image_01.jpg"
    }, {
        url: "images/image_02.jpg"
    }, {
        url: "images/image_03.jpg"
    }, {
        url: "images/image_04.jpg"
    }, {
        url: "images/image_05.jpg"
   }];

   var preload = function (assets) {
       var num = assets.length,
           pointer = 0;
       dom = $('.preload img'),
       getNextUrl = function (assets) {

           if (pointer < (num - 1)) {
               pointer++;
           } else {
               return false;
           }
           dom.attr('src', assets[pointer].url);
           dom.onload = getNextUrl(assets);
       };

       dom.onload = getNextUrl(assets);
       dom.attr('src', assets[0].url);

   };
   var it = 0; //holding position of assets array
   var img = $('<img/>');
   assets = randomize(assets);
   preload(assets);

   for(var x = 0; x < assets.length; x++){
       img = $('<img/>').attr('src',assets[x].url);
       $('.fadein').append(img);
   }
   $('.fadein img:gt(0)').hide(); 
   setInterval(function(){
       $('.fadein :first-child').addClass('dropback')
           .fadeOut(2500).next('img').removeClass('dropback')
               .fadeIn(2500).end().appendTo('.fadein');
   }, 7500); 

});

</script>

响应选项卡部分的html： 项目1 项目2 项目3 项目4

html文档中包含响应选项卡脚本-有关完整jquery.responsiveTabs.js脚本太长而无法在此处发布，请查看：

除了打开相关的文本面板，我还需要响应选项卡列表项tab-1、tab-2、tab-3和tab-4，以允许我指定现有幻灯片脚本中可能包含的不同图像，或在同一imagearea div中触发对原始/现有幻灯片的不同/替换-以使其工作的为准

简而言之，我想要的是：

页面加载时： 图01，图02，图03，…04，…05

单击选项卡1时： 表1面板/文本和图像_06，…07，…08

单击选项卡2： 表2面板/文本和图像09、10、11

单击选项卡3： 表3面板/文本和图像12、13、14

单击选项卡4： 表4面板/文本和图像15、16、17

可能吗？触发多个这样的事件？： 正如我所说，我是js/jq新手，所以请尽可能详细地描述我所需要的内容

谢谢大家,，

---

AK

你可以使用ajax填充选项卡的内容，你到底被困在哪里了？@Dave-不，不能使用ajax。由于不知道如何根据选择的选项卡触发指定图像的更改而陷入困境。一直不知道在2个脚本中插入什么，在哪里，用js/jq实现这一点。无法理解，您在哪里感到执行困难。刚刚编辑/添加到我以前的评论中…加入我这里

    <div id="tab-1">
        <p>blah blah blah. Lorem ipsum and so forth...</p>
    </div>

    <div id="tab-2">
        <p>yadda yadda more text and such</p>
    </div>

    <div id="tab-3">
        <p>something else the client wants to say</p>
    </div>

    <div id="tab-4">
        <p>oh yeah, and another thing...</p>
    </div>

</div>

    <!-- jQuery with fallback to the 1.* for old IE -->
    <!--[if lt IE 9]>
<script src="js/jquery-1.11.0.min.js"></script>
<![endif]-->
    <!--[if gte IE 9]><!-->
        <script src="js/jquery-2.1.0.min.js"></script>
    <!--<![endif]-->

    <!-- Responsive Tabs JS -->
    <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#horizontalTab').responsiveTabs({
                rotate: false,
                startCollapsed: true,
                animation: 'break',
                collapsible: 'accordion',
                setHash: true,
                disabled: []
            });

            $('#start-rotation').on('click', function() {
                $('#horizontalTab').responsiveTabs('active');
            });
            $('#stop-rotation').on('click', function() {
                $('#horizontalTab').responsiveTabs('stopRotation');
            });
            $('#start-rotation').on('click', function() {
                $('#horizontalTab').responsiveTabs('active');
            });
            $('.select-tab').on('click', function() {
                $('#horizontalTab').responsiveTabs('activate', $(this).val());
            });

        });
    </script>