0

我已经说过创建一个简单的 MVC 4 站点，可以在这里看到：问题站点

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

为了替换我从这里使用作者初始 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; }

谁能告诉我移动图像需要做什么？似乎除非我有一个 position:absolute 的 .fadin img ，否则当 jQuery 轻弹到下一个图像时，我可以同时看到每个图像。我不知道如何将所有图像设置为相对于前一个 div 的位置，以便每个图像覆盖前一个？

4

2 回答 2

2

让你的.fadein亲戚和浮动正确，这应该给你你想要的。

编辑：感谢 Ilya Streltsyn 你最好margin-left: auto在你的.fadeindiv 上使用。这将防止父级在使用浮动时崩溃。

于 2013-07-03T09:16:57.777 回答
0

您的.fadein解决方案应该适用于position:relative;

于 2013-07-03T09:18:35.817 回答