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