Question

我已经声明创建一个简单的MVC 4站点，可以在这里看到：problem site

我希望交替的图像显示在蓝色边框内的段落右侧。

要替换我使用作者初始JS的图像：JQuery

<script type="text/javascript">
jQuery(document).ready(function() {
    $('.fadein img:gt(0)').hide();
    setInterval(function () {
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    },
      3000);
});
</script>

index.cshtml中的标记如下：

<div id="intro">
    <p>
    Don't let memories fade - preserve them for generations to come.<br />
    Yorkshire Image Scanning can create perfect digital copies of your photographs, stored on DVD or USB memory stick.
    The access the digital images simply insert into a DVD player and a slideshow will start to run. 
    Alternatively, the images can be copied to your PC, iPad, smartphone etc and backed up using any normal method such as external hard disk or DVD copies or cloud storage.
    Of course, digital images are so much easier to share than old photographs. Upload them to facebook and let distant friends share your memories!
    </p>
</div>
<div class="fadein">
    <img src="~/Content/img/old_photos/1.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/2.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/3.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/4.jpg" alt="Old Photos" />
    <img src="~/Content/img/old_photos/5.jpg" alt="Old Photos" />
</div>

CSS如下：

#intro {
   float: left;
   width: 50%;
}

.fadein { width:300px; height:300px; }
.fadein img { position:absolute; left:0; top:0; }

有人可以建议我移动图像需要做些什么吗？似乎除非我的.fadin img有一个位置：绝对然后我会在jQuery轻弹到下一个图像的同时看到每个图像。我不知道如何将所有图像设置为相对于前一个div的位置，以便每个图像覆盖前一个图像？

Answer 1

让你的.fadein亲戚向右浮动，这应该可以给你你想要的东西。

编辑：感谢 Ilya Streltsyn 你最好在margin-left: auto div上使用.fadein。这样可以防止父级在使用浮动时崩溃。

Answer 2

您的.fadein解决方案应与position:relative;

一起使用

CSS div位置叠加图像

2 个答案: