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

ребята!

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

Эта идея была вдохновлена ​​домашней страницей Triumph (по состоянию на 16.02.17) здесь: http://www.triumphmotorcycles.com/

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

Вот скриншот их главной страницы Вот мой код:

            <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>

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

Привет из Техаса! :П


javascript image background responsive slideshow
person Isaiah Sias    schedule 16.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Пожалуйста, будьте более конкретны в следующем вопросе.

person Fabian Horlacher    schedule 16.02.2017
comment
У меня есть большая часть настроек, но слайд-шоу больше не воспроизводится, хотя я все еще возюсь. Мне очень нравится этот метод, и я хотел бы получить его для будущего использования. Я знаю, что делаю что-то не так, но пока не нашел. - person Isaiah Sias; 16.02.2017
comment
Получил работу, и теперь я понимаю функцию и массив, потому что вы нашли время, чтобы помочь. Благодарю вас! - person Isaiah Sias; 17.02.2017