全屏背景图像+旋转图像

Full Screen Background Image(s) + Rotating Images?

本文关键字：图像 旋转 背景      更新时间：2023-09-26

我知道如何实现全屏/可扩展的背景图像；我通常使用jQuery方法。例如：http://tinyurl.com/9yl4rbw

但是！我正在努力使它的背景图像是不同的，每次访问页面。不是幻灯片；但与旧的javascript（例如：http://www.computerhope.com/j18.htm)

我怎么能把两者结合起来呢；jQuery可扩展背景和页面刷新新图像javascript？

有人见过这种效果的高质量插件吗？

*编辑___*

我在上面的参考URL中使用了jQuery方法；基本上如下：

<!--Expandable BG code IE 7 +-->
  <style>
                #bg { position: fixed; top: 0; left: 0; }
                .bgwidth { width: 100%; }
                .bgheight { height: 100%; }
                #page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;;  }
  </style> 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
                $(function() {   
                        var theWindow        = $(window),
                            $bg              = $("#bg"),
                            aspectRatio      = $bg.width() / $bg.height();
                        function resizeBg() {
                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                                    $bg
                                        .removeClass()
                                        .addClass('bgheight');
                                } else {
                                    $bg
                                        .removeClass()
                                        .addClass('bgwidth');
                                }
                        }
                        theWindow.resize(function() {
                                resizeBg();
                        }).trigger("resize");
                });
        </script>

<!--Expandable BG code IE 7 +-->
<!--Full BG Call-->
<img src="Sandwichfullbg.jpg" id="bg" >

<div id="page-wrap">

<!--End Full BG Call-->

我想找到一个简单的解决方案，在新页面访问或页面刷新时更改背景；理想地保持大约30个图像EG：刷新页面>新建rad图像；刷新页面>新建rad图像；（x 30）

将此代码添加到JS的顶部。它将图像的src属性设置为从Sandwichfullbg0.jpg到Sandwichfollbg29.jpg的随机值（因此总共有30个不同的图像）

$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');

为什么不使用新的background-size:cover作为背景，然后使用jQuery按照常规方法随机更改此背景图像？

我为你创建了一个jsfiddle，基本上可以做你需要的一切。（在jsfiddle中继续单击Run，您将随机看到背景图像循环）。

请注意，背景尺寸：封面，主要适用于较新的蝴蝶结，但使用Modernizr可以克服这一点。

通过将Modernizr链接到您的标题中来安装它

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

在你的HTML标签中，

<html class="no-js">

编辑：根据评论，我采用了另一种更支持浏览器的方式：
jsfiddle

这一次，我只是让它随机应用了一个类，这个类有供应商前缀，并修复了ie-7/ie-8和其他所有类。它在IE8中看起来并不完美，但图像会完全拉伸以适应身体的高度/宽度。

看看这个。查看源代码并将其签出。我使用z索引较低的图像，因为这样可以更容易地调整大小。此外，我会优化你的背景图像，使其不那么大。它几乎是一MB，而且加载时间太长。当纵横比不是宽屏时，您的版本无法很好地调整大小。

相关文章：