Question

jQuery / javascript的新手，但太害怕...朋友帮我解决了下面的幻灯片脚本，我已经从jellekralt的响应标签jQuery脚本中删除了github上...

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

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

但是现在我选择使用响应标签jQuery代码（https://github.com/jellekralt/Responsive-Tabs）只有主要部分页面，而选项卡用于打开显示（什么是）子页面的面板＆＃39;而是文字。（将每个主要部分和子部分保存在同一个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（非常简单！ - ＆＃34; fadein＆＃34;类在页面加载时触发幻灯片显示）：

<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
项目3
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（除了打开相关的文本面板）以允许我指定不同的图像（可能包括在现有的幻灯片放映脚本中，或者触发原始/现有幻灯片放映的不同/替换，在相同的＆＃34; imagearea＆＃34; 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/ 正如我所说，我是js / jq的新手，所以请尽量详细说明我需要的。

请和谢谢你， AK

jQuery响应标签在选项卡选择时开始新的幻灯片放映/替换现有的幻灯片放映？

0 个答案: