Question

N.B。可以找到此帖子中引用的链接here。

我是jquery的新手，我正在尝试使用CrossSlide插件（请参阅链接1），但我需要扩展图像以填充我的网页背景。只要它们合适，它们是否超出比例并不重要。

Crossslide的默认设置会导致图像以基本淡入淡出过渡。使用以下CSS我可以使图像填充背景：

#slideshow {
  width: 600px;
  height: 200px;
}

请参阅链接2了解工作示例。

Cross Slide具有高级设置，允许图像以平移效果进行转换。

我可以使平移效果起作用（参见链接3）。但是，如果我尝试使用CSS使图像填充背景，它将停止工作（参见链接4）。

有人可以给我一些关于如何实现目标的指示。

（PS如果示例中的代码看起来有点奇怪，因为我使用的是Drupal并且刚刚保存了这些页面，所以我不需要运行3个不同的Drupal安装。实际的Drupal站点可以在链接5）。

Answer 1

我不知道这是不是你问的问题，但试试这个：

的Javascript

<script type="text/javascript">
        $(document).ready(function () {
            $('.slideHolder').crossSlide({
                sleep: 2,
                fade: 1
            }, [
  { src: 'Images/Chrysanthemum.jpg' },
  { src: 'Images/Penguins.jpg' },
  { src: 'Images/Tulips.jpg' }
]);

        });
</script>

CSS

<style type="text/css">
    .slideHolder
    {
        width:600px;
        height:300px;
    }
    .slideHolder img
    {
        width:100%;
        height:100%;
    }
</style>

答案

此处的关键是设置.slideHolder img大小，以便图像适当拉伸。

修改

Crossslide会遇到一些问题，因为图像需要大于正交叉的div。

Answer 2

获取document.height和document.width。并显示所述W＆amp;内部H，然后显示图像。它应该工作得很好。

并且

.click(function() {

$('#').fadeIn();

});

希望这有帮助

使jQuery幻灯片填充网页的背景

2 个答案:

的Javascript

CSS

答案

修改