通过 html/javascript 使用响应式幻灯片作为全尺寸网页背景

Question

伙计们！

我正在为我的投资组合开发一个项目，我认为它具有以下功能绝对是不错的选择：响应式幻灯片，适合由可点击图像组成的浏览器，link 您可以获得更多信息关于具体产品。

这个想法的灵感来自 Triumph 的主页（截至 2017 年 2 月 16 日）：http://www.triumphmotorcycles.com/

话虽如此，我已经选择了几张适合整个浏览器的漂亮图片（尽管它们的尺寸都不一样）。我用它们创建了 Javascript 的幻灯片（我想为图像使用一个数组只是为了养成良好的习惯）并将高度设置为 400x400px 只是为了感受创建幻灯片的感觉。效果很好！现在是时候让这个幻灯片像 Triumph 的网站一样漂亮整洁地适应浏览器了！ :)

Here is a screenshot of their homepage 这是我的代码：

            <script type="text/javascript">
            var image1=new Image();
            image1.src="Africa Twin Mountainside.jpg";
            var image2=new Image();
            image2.src="FZ-10.jpg";
            var image3=new Image();
            image3.src="GSXR track.jpg";
            var image4=new Image();
            image4.src="Pioneer 1k mountain.jpg";
            var image5=new Image();
            image5.src="Raptor sand.jpg";
        </script>           





        <img src="Africa Twin Mountainside.jpg" name="slide" width="400" height="400" alt=""/>

        <script type="text/javascript">
            var step=1;
            function slideit(){
            document.images.slide.src=eval("image"+step+".src");
            if(step<5)
                step++;
            else
                step=1;
            setTimeout("slideit()", 2500);                
             }
            slideit();            
        </script>

我目前的 objective 是为了适应浏览器 window 响应图像。创建一个非滚动的、漂亮的幻灯片背景。任何有关将其安装到浏览器的帮助 window 将不胜感激！

得克萨斯州的欢呼声！ :P

Answer 1

此脚本遍历 images 数组中的所有 url：

// List your image urls
var images = [
  "https://homepages.cae.wisc.edu/~ece533/images/airplane.png",
  "https://homepages.cae.wisc.edu/~ece533/images/arctichare.png",
  "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
  "https://homepages.cae.wisc.edu/~ece533/images/barbara.png",
  "https://homepages.cae.wisc.edu/~ece533/images/boat.png",
]

// Array indexes start with 0
var step=0;
function slideit(){
  // set the src of the image tag to the url from the array
  var imageUrl = images[step];
  document.getElementById('slide').src = imageUrl;
  // count up
  step++;
  // reset if the end of the array was reached
  if(step>=images.length)
    step=0;
  // and repeat
  setTimeout("slideit()", 2500);                
}
slideit();

<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" id="slide" width="400" height="400" alt=""/>

或者将图像设置为您的页面背景：

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(' + imageUrl + ')';

但随后您需要设置一些 css 属性以禁用重复并将其调整为 100%。

下一个问题请更具体。

通过 html/javascript 使用响应式幻灯片作为全尺寸网页背景

Using a responsive slideshow as full-sized webpage background via html/javascript

javascript

background

image

slideshow

responsive