[英]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/的内容
那是,
当第一张幻灯片->字幕将位于幻灯片顶部
第二张幻灯片->中间
第三张幻灯片->底部。[重复]。
谁能帮助我提供确切的解决方案?
任何帮助将受到高度赞赏。
提前致谢。
删除左边距为无
document.getElementById('crossSlideCaption').style.marginLeft = '-485px';
document.getElementById('crossSlideCaption').style.marginLeft = '-100px';
您可以输入以下代码并尝试:
样式:
#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");
}
并且与所有其他情况类似。
这是Jsfiddle
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.