Баннер вращающихся изображений. Каждое изображение при нажатии отправляет на другой URL (vanilla javascript) - PullRequest
Новая
       0

Баннер вращающихся изображений. Каждое изображение при нажатии отправляет на другой URL (vanilla javascript)

1 голос
/ 18 февраля 2020

Мне дали два примера того, как это сделать, но ни один из них не делает обе вещи, которые я собираюсь сделать. Мой сайт должен содержать:

  • Баннер с вращающимся изображением (3 изображения), который меняется каждые несколько секунд
  • Каждое изображение должно быть кликабельным и перенаправлять вас на другой URL

В нашей недавней лекции профессор написал этот код на доске и сказал, что именно так вы и сделали. Тем не менее, это не работает для меня. 

<html>
 <head>
     <script language=JAVASCRIPT type=TEXT/JAVASCRIPT>
     //I'm not sure when to use '' or ""
     //I replaced some of the "picture.jpg" images with links to images. I'm not sure if I used the right syntax. 
     adImages = new Array("https://i.picsum.photos/id/666/800/200.jpg", 
                          "https://i.picsum.photos/id/420/800/200.jpg", 
                          "https://i.picsum.photos/id/888/800/200.jpg");
 adURL = new Array("https://google.com","https://github.com","https://stackoverflow.com");
 thisAd = 0;
 //length of what?
 imgCt = adImages.length;

 function rotate()
 {
  if (document.images)
  {
    thisAd++;
    //Is it better practice to use "==="?
    if (thisAd == imgCt)
    {
      thisAd = 0;
    }
    document.adBanner.src=adImages[thisAd];
      setTimeout("rotate()", 2 * 1000);
  }
 }

 function newLocation()
 {
  document.location.href = adURL[thisAd];
 } 
 </script>
 </head>
     //I don't understand what this is at all
     <body onload=rotate()>
         //Apparently <center> is obsolete?
         <center>
             <p><font size=4>Rotating Banner <font color=#ff0000>Assignment 6</font> Rotate Party - 
             Udemy</font> 
             </p>
         <a href="javascript:newLocation()"><IMG height=105 alt="Ad Banner" 
         src="https://i.picsum.photos/id/666/800/200.jpg" width=610 name=adBanner></a>
         </center>
   </body>
  </html>

Просто на голову. Последние пару недель я публиковал свои слайды из класса на Reddit, и я получил много комментариев о том, что вещи ужасно устарели. Если вы можете, , пожалуйста, дайте мне примеры, которые являются более современными или лучшими методами, чем то, что вы изучаете, . Вы можете найти разговоры о моем опыте обучения JavaScript в колледже здесь, если вам интересно: https://www.reddit.com/user/gettupled/

Вторым примером, который нам дали, было видео на YouTube, которое дало следующий пример. Однако он не включает возможность щелкнуть изображение и отправить его по URL-адресу. Я не уверен, что обычно публиковать код HTML, CSS и Javascript в теле сообщения, поэтому я просто прикреплю кодовую ручку, если не указано иное. Этот код взят из Travesy Media.

https://codepen.io/vitalwheat/pen/QWbEyqN

Спасибо всем. Это мой первый пост здесь. Привет.

1 Ответ

0 голосов
/ 18 февраля 2020

Есть много способов реализовать это. Вот один из способов сделать это.

рабочая демоверсия 

(function() {
  "use strict";

  const imageList = [
    "https://i.picsum.photos/id/666/800/200.jpg",
    "https://i.picsum.photos/id/420/800/200.jpg",
    "https://i.picsum.photos/id/888/800/200.jpg"
  ];

  const urlList = [
    "https://google.com",
    "https://github.com",
    "https://stackoverflow.com"
  ];

  function createRotatingBanner(rotationTime) {
    const $adsBanner = document.querySelector(".adBanner");
    let $bannerList;

    let currentBannerRendered = 0;

    function renderBanner() {
      Array.from($bannerList).forEach((banner, bannerIndex) => {
        banner.className = bannerIndex === currentBannerRendered ? "" : "hide";
      });
      currentBannerRendered = (currentBannerRendered+1)%$bannerList.length;
    }

    // creating Banner image and setting them to hide
    function createBanner() {
      const fragement = new DocumentFragment();

      imageList.forEach((image, index) => {
        const banner = document.createElement("img");
        banner.src = image;
        // wrapping image with anchor element
        const anchor = document.createElement("a");
        anchor.href = urlList[index];
        // hide all the banner
        anchor.className = "hide"
        anchor.appendChild(banner);
        fragement.appendChild(anchor);
      });
      const cloneFragement = [...fragement.children];
      $adsBanner.appendChild(fragement);
      return cloneFragement;
    }

    $bannerList = createBanner();
    renderBanner();

    setInterval(renderBanner, rotationTime);
  }

  createRotatingBanner(2000);
})();
.hide {
  display: none;
}
<div class="adBanner"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...