将jquery中的标题与滑块对齐
align caption with slider in jquery
以下是http://jsfiddle.net/j88u02o2/59/
html:
<div id="container">
<div id="example">
<div id="slides" style="width:1000px;height:430px;"></div>
<div id="" class="" style="position:relative; width:970px; margin:auto;" align="">
<div id="crossSlideCaption" class="caption">
</div>
</div>
</div>
这是我的脚本:
$(function() {
$('#slides').crossSlide({
speed: 40,
fade: 1
}, [
{ src: 'img/photo-2.jpg', dir: 'up', alt: 'Our Business is to Encrypt and Secure Your Communications', href: '#' },
{ src: 'img/photo-10.jpg', dir: 'down', alt: 'The Solution for Secured Communications and Privacy.', href: '#' },
{ src: 'img/photo-3.jpg', dir: 'up', alt: 'All Text and Phone Communications are Encrypted End-to-End.', href: '#' },
{ src: 'img/photo-4.jpg', dir: 'down', alt: 'Secured Communications for Law Enforcement and Public Officials.', href: '#' },
{ src: 'img/photo-5.jpg', dir: 'up', alt: 'Secured Communications for the U.S. Military.', href: '#' },
{ src: 'img/photo-6.jpg', dir: 'down', alt: 'The World Leader in Encrypted Communications.', href: '#' },
{ src: 'img/photo-7.jpg', dir: 'down', alt: 'The Solution for Corporate Executives, Law Enforcement, Homeland Security, Goverment Agencies and more...', href: '#' }
/* */
], function(idx, img, idxOut, imgOut) {
if (idxOut == undefined) {
if(idx == 0 || idx == 3 || idx == 6 || idx == 9){
document.getElementById('crossSlideCaption').style.marginTop = '0px';
document.getElementById('crossSlideCaption').style.marginBottom = '-85px';
}else if(idx == 1 || idx == 4 || idx == 7 || idx == 10 || idx == 12){
document.getElementById('crossSlideCaption').style.marginTop = '280px';
document.getElementById('crossSlideCaption').style.marginBottom = '-100px';
}else{
document.getElementById('crossSlideCaption').style.marginTop = '-52px';
document.getElementById('crossSlideCaption').style.marginBottom = '-485px';
};
$('div.caption').text(img.alt).animate({ opacity: 1.0 })
} else {
$('div.caption').animate({ opacity: 0 })
}});
$('div.caption').show().css({ opacity: 0 })
});
一切都很好,除了标题。
所以,我尝试了这个代码,
function(idx, img, idxOut, imgOut) {
if (idxOut == undefined) {
if(idx == 0 || idx == 3 || idx == 6 || idx == 9){
document.getElementById('crossSlideCaption').style.marginTop = '0px';
document.getElementById('crossSlideCaption').style.marginBottom = '-85px';
}else if(idx == 1 || idx == 4 || idx == 7 || idx == 10 || idx == 12){
document.getElementById('crossSlideCaption').style.marginTop = '280px';
document.getElementById('crossSlideCaption').style.marginBottom = '-100px';
}else{
document.getElementById('crossSlideCaption').style.marginTop = '-52px';
document.getElementById('crossSlideCaption').style.marginBottom = '-485px';
};
但是,它仍然不起作用,我需要这样的东西http://securedcommunications.com/
也就是说,
当第一张幻灯片->标题将在幻灯片的顶部时
第2张幻灯片-->中间
第三张幻灯片-->底部。[重复]。
有人能帮我找到确切的解决方案吗?
如有任何帮助,我们将不胜感激。
提前谢谢。
您可以放入以下代码并尝试:
样式:
#crossSlideCaption{
z-index:999 !important;
position:relative !important;
}
脚本:
if(idx == 0 || idx == 3 || idx == 6 || idx == 9){
$('#crossSlideCaption').css("top","20px");
$('#crossSlideCaption').css("left","0px");
}
并且类似于所有其它条件。
这是Jsfidle
删除空白
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
document.getElementById('crossSlideCaption').style.marginLeft = '-100px';
这是一个链接http://jsfiddle.net/3jcgfhec/
相关文章:
- HTML固定标题-将位置th与td在同一级别上对齐
- 将jquery中的标题与滑块对齐
- 居中对齐标题谷歌图表
- 未对齐的边框/宽度固定了表格标题和表格
- 如何在 angularjs 材料设计中显示选项卡标题中心对齐
- 将图像标题区域与图像对齐
- JQGrid 标题和列未对齐
- 将文本与对话框中标题栏中的图像对齐
- 离子后退按钮与标题右侧对齐
- 如何制作捕捉到浏览器两侧的对齐标题
- 固定的表格标题更改位置/不在镀铬中对齐
- 高位图表图例标题水平对齐
- 增强Showdown.js表代码,使其支持表标题的左/右对齐
- 当标题长度不同时,如何使用css对齐html文本
- 居中对齐标题在谷歌图表
- 删除Ext.panel.Header上的标题和工具之间的对齐
- 更新到Bootstrap 3.2.0 -导航标题对齐后变得不对齐
- 如何使浮动标题列水平滚动并防止它们向左对齐
- jQueryUI 对话框隐藏关闭 (X) 按钮,如果标题包含右对齐的文本.我该如何解决这个问题
- 表格行的显示样式与标题保持对齐