Question

对于为iPad创建的网站内的幻灯片，我有以下结构

<div id="slide4">
    <div class="slide4A1"></div>
    <div class="slide4A2"></div>
    <div class="slide4A3"></div>
</div>

每个块包含通过媒体查询控制的背景图像，以允许它们填充屏幕，无论Ipad是纵向还是横向。

我需要为块设置动画，但希望位置如下 -

.slide4A1 - 向左固定 .slide4A2 - 固定中心 .slide4A3 - 修正了

我试过左右浮动幻灯片1和3并以自动边距为中心 - 但布局误入歧途 - 任何想法？

js fiddle here - http://jsfiddle.net/chunk_pd/PAqSb/6/

Answer 1

我相信这是你期望看到的：

<强> CSS：

#slide4 {position: relative; }
.slide4A1, .slide4A3{ position:absolute; top: 0; }
.slide4A1{background:#000;  width:120px; height:1024px; left:-120px;}
.slide4A2{background:#367ab2; width:531px; height:1024px; margin-left:auto; margin-right:auto; position:relative!important; display: none;}
.slide4A3{background:#ff7e00; width:120px; height:1024px; right:-120px;}

<强> JS：

function goDown3bPt2(){
                $('.slide4A1').animate({left:'0',}, 1600);
                $('.slide4A2').fadeIn('slow');
                $('.slide4A3').animate({right:'0',}, 2100);

        }

更新了jsfiddle。

Answer 2

首先，您必须清理CSS - 合并position: absolute;和float将无效。使用您的包装器<div id="slide4">并将其定位设置为相对和width: 100%。两个动画div都必须有position: absolute; top: 0px;才能到达包装器的顶部。

更重要的是 - 你的JS中有一个拼写错误：

$('.slide4A1').animate({left:'0px;',}, 1600);只需删除;在0px和瞧之后。

Answer 3

应用宽度：100％，边距：0自动滑动4 宽度：33％滑动4A1，slide4A2，slide4A3

Float Left to slide4A1并向右浮动到slide4A3类...... !!

CSS定位 - 固定中心 - 固定左和右固定正确的元素

3 个答案: