jQuery / javascript的新手,但不要太害怕...朋友帮我解决了下面的幻灯片脚本,并且我从github上获得了响应标签jQuery脚本...

我有循环图像的javascript,自动播放,交叉渐变幻灯片(在每个页面的html文件中指定(以js确定的随机顺序,FWIW)) .

我有主要部分页面链接到子页面,每个子页面中的主页面都有不同的图像 .

但是现在我选择使用响应选项卡jQuery代码(https://github.com/jellekralt/Responsive-Tabs)只有主要部分页面,而选项卡用于打开显示(什么是)子页面文本的面板 . (将每个主要部分和子部分保存在同一个html文件中,可以根据媒体查询断点提供从标签到手风琴的响应式更改,从而在桌面和移动设备上实现更清晰的导航和演示......当然,页面更少!

我希望标签(或断点后的手风琴 Headers )触发幻灯片中指定图像文件的更改,如果进入新的/单独的子部分的页面会发生这种情况,但我希望这会发生在同一页 .

图像幻灯片显示不是/不能在每个选项卡中 .

我的基本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部分:

  • item1

  • item2

  • item3

  • item4

<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>

自适应选项卡脚本(包含在html doc中 - 用于完整的jquery.responsiveTabs.js脚本(此处发布时间太长)请查看https://github.com/jellekralt/Responsive-Tabs):

<!-- 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>

我想要响应选项卡列表项#tab-1,#tab-2,#tab-3和#tab-4(除了打开相关的文本面板)以允许我指定不同的图像(可以包括在现有的幻灯片演示脚本,或者在同一个“imagearea”div中触发原始/现有幻灯片的不同/替换 - 无论哪个使其工作!

简而言之,我正在寻找的是:

在页面加载:image_01,image_02,image_03,... 04,... 05

点击#tab-1:(tab-1 panel / text and)image_06,... 07,... 08

点击#tab-2:(tab-2 panel / text and)图像09,10,11 ......

点击#tab-3:(tab-3 panel / text and)图像12,13,14 ......

点击#tab-4:(tab-4 panel / text and)图像15,16,17 ......

可能?触发这样的多个事件?:http://css-tricks.com/forums/topic/trigger-multiple-events-on-click-with-javascriptjquery/正如我所说的那样,我需要 .

请和谢谢你,AK