通过html/javascript使用响应式幻灯片作为完整大小的网页背景

Question

伙计！

我正在为我的投资组合开发一个项目，我认为这对于以下功能绝对是甜蜜的：响应式幻灯片，适合浏览器，由可点击图片组成，可链接到更多关于特定产品的信息。

这个想法的灵感来自于凯旋的主页（截至17年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> 

我现在的目标是响应适合图像浏览器窗口。创建一个非滚动，漂亮的幻灯片背景。任何帮助，以适应这个浏览器窗口将不胜感激！

来自德克萨斯州的欢呼声！ ：P

Answer 1

这个脚本通过的所有URL的images数组中循环：

// 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％。

请在你的下一个问题上更具体。