Javascript 将标题与jquery中的滑块对齐

这是你的电话号码

html:

除了标题外，一切正常

所以，我试着用这个代码

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';
                };

但是，它仍然不起作用，我需要这样的东西

就是

第一张幻灯片时->标题将位于幻灯片顶部

第二张幻灯片-->中间

第三张幻灯片-->底部[重复]

有人能帮我找到这个问题的确切答案吗

任何帮助都将不胜感激

---

提前感谢。

将页边空白删除为“无”

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");
}

与所有其他条件类似

---

这是您的小提琴中的

，但第三个滑块不在右下角？第三个滑块不在代码中。我刚刚加了。你可以在这里看到更新的提琴：如果我有长文本字符的意思，需要这样显示，。。。但对我来说，它只显示一行。我能知道怎么做吗？你可以简单地将文本居中对齐和宽度添加到特定的标题条件中，如

#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");
}