Question

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/

即，

第一张幻灯片时的

- ＆gt;标题将位于幻灯片之上

第二张幻灯片 - ＆gt;中间

第三张幻灯片 - ＆gt;底部。[重复]。

任何人都可以帮我解决这个问题吗？

任何帮助都将受到高度赞赏。

提前致谢。

Answer 1

删除margin-left to none

document.getElementById('crossSlideCaption').style.marginLeft = '-485px';

document.getElementById('crossSlideCaption').style.marginLeft = '-100px';

这是一个链接http://jsfiddle.net/3jcgfhec/

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

和所有其他条件类似。

这是Jsfiddle

在jquery中将标题与滑块对齐

2 个答案: