这是 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/
也就是说,
当第一张幻灯片时-> 标题将在幻灯片顶部
第二张幻灯片-->中间
第三张幻灯片 -->底部。。
谁能帮我解决这个问题?
如有任何帮助,我们将不胜感激。
提前致谢。
最佳答案
您可以输入以下代码并尝试:
风格:
#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
关于javascript - 在 jquery 中将标题与 slider 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28403570/