Использование отзывчивого слайд-шоу в виде полноразмерного фона веб-страницы через html/javascript

Question

ребята!

Я работаю над проектом для своего портфолио, которое, я думаю, будет абсолютно приятным со следующей функцией: отзывчивое слайд-шоу, соответствующее браузеру, который сделан из интерактивных изображений, которые связывают вас с дополнительной информацией о конкретном продукте.

Эта идея была навеяна домашней страницей Триумфа (по состоянию на 2/16/17) здесь: http://www.triumphmotorcycles.com/

С этим сказанным, я отобрал несколько хороших изображений, которые будут соответствовать всему браузеру (хотя все они не того же размера). Я использовал их для создания слайд-шоу с Javascript (я хочу использовать массив для изображений, чтобы привыкнуть к хорошей привычке) и установить высоту 400x400 пикселей, чтобы почувствовать создание слайд-шоу. Он отлично работает! Теперь настало время, чтобы это слайд-шоу соответствовало браузеру красиво и аккуратно, как сайт Триумфа! :)

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> 

Моя текущая цель состоит в том, чтобы соответствовать изображения ответно в окне браузера. Чтобы создать фоновый слайд-шоу без прокрутки. Любая помощь по установке этого в окно браузера будет принята с благодарностью!

Cheers from Texas! : P

Answer 1

Этот сценарий перебирает все URLs в 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%.

Пожалуйста, уточните свой следующий вопрос.