33: How to create a rotating banner using JavaScript – Learn JavaScript front-end programming



How to create a rotating banner using JavaScript – Learn JavaScript front-end programming. In this lesson we will learn how to create a rotating banner from scratch using JavaScript.

Download lesson files: http://mmtuts.net/course.php?c=js&l=33

mmtuts is a YouTube channel that focuses on teaching beginner and advanced courses in various multimedia related skills.
We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs.

JavaScript for beginners is a how to series that teaches the JavaScript coding language to people who are just starting out learning programming. The course teaches how JavaScript scripting can be made easy and teaches how to build many features on websites through behavior using JavaScript. Creating behavior on websites with JavaScript is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners.

If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.

Original source

50 thoughts on “33: How to create a rotating banner using JavaScript – Learn JavaScript front-end programming

  • August 14, 2019 at 15:39
    Permalink

    I have 7 image, i want to slide it but i have no idea for index let it run.please help me.
    function bannerLoop() {

    if (bannerStatus === 1) {

    document.getElementById("imgban2").style.opacity = "0";

    setTimeout(function() {

    document.getElementById("imgban1").style.right = "0px";

    document.getElementById("imgban1").style.zIndex = "1000";

    document.getElementById("imgban2").style.right = "-1200px";

    document.getElementById("imgban2").style.zIndex = "";

    document.getElementById("imgban3").style.right = "px";

    document.getElementById("imgban3").style.zIndex = "";

    document.getElementById("imgban4").style.right = "px";

    document.getElementById("imgban4").style.zIndex = "";

    document.getElementById("imgban5").style.right = "px";

    document.getElementById("imgban5").style.zIndex = "";

    document.getElementById("imgban6").style.right = "px";

    document.getElementById("imgban6").style.zIndex = "";

    document.getElementById("imgban7").style.right = "px";

    document.getElementById("imgban7").style.zIndex = "500";

    }, 500);

    setTimeout(function() {

    }, 1000);

    document.getElementById("imgban2").style.opacity = "1";

    bannerStatus = 2;

    } else if (bannerStatus === 2) {

    document.getElementById("imgban3").style.opacity = "0";

    setTimeout(function() {

    document.getElementById("imgban2").style.right = "0px";

    document.getElementById("imgban2").style.zIndex = "1000";

    document.getElementById("imgban3").style.right = "-1200px";

    document.getElementById("imgban3").style.zIndex = "";

    document.getElementById("imgban4").style.right = "px";

    document.getElementById("imgban4").style.zIndex = "";

    document.getElementById("imgban5").style.right = "px";

    document.getElementById("imgban5").style.zIndex = "";

    document.getElementById("imgban6").style.right = "px";

    document.getElementById("imgban6").style.zIndex = "";

    document.getElementById("imgban7").style.right = "px";

    document.getElementById("imgban7").style.zIndex = "";

    document.getElementById("imgban1").style.right = "px";

    document.getElementById("imgban1").style.zIndex = "500";

    }, 500);

    setTimeout(function() {

    }, 1000);

    document.getElementById("imgban3").style.opacity = "1";

    bannerStatus = 3;

  • August 14, 2019 at 15:39
    Permalink

    Does anyone know if there's a way to make this rotating banner change size with the size of the browser window? I've been playing around with it and so far I've been able to make everything on my site move and resize with the window browser except the actual images inside the slide show.

  • August 14, 2019 at 15:39
    Permalink

    Like a lot of other people, I am trying to get the reverse loop just right. I have it to the point where it is working most of the time, but sometimes it does the wonky flip as seen in the video when switching directions and when it resumes the loop on mouse leave. The link is still broken and I'm pretty sure his site doesn't exist anymore unfortunately, either that or I just can't find it. Any help with this would be greatly appreciated, Daniel. I love your content!

  • August 14, 2019 at 15:39
    Permalink

    I'm a total noob to js (never used it locally before), but not a noob to programming (VBA pascal, database stuff, some html and css).
    What infrustructure does this rely on to work?
    I'm using MS Expression Web 4 , I've typed in exactly what you have shown in the css and the html page, trying to understand as much as I can as I go, but making sure I have everything char perfect. I then preview in the likes of Chrome and …nothing. Blank page all the way through the tutorial.
    I realize I have kinda jumped into the middle of a tutorial series, and while my learning pure html and css examples (tests) have been working as expected, I get Nudda on this. Is there something I'm missing? I'm assuming the issue is js because if I put a simple <p>hello world</p> in the html body that works fine. Running Windows 10, guessing I'm missing something to do with java script back end support. Also what software do you recommend for coding? I'm using Expression Web 4 but as its old and no longer updated (I think) i'm sure there are better environments.

  • August 14, 2019 at 15:39
    Permalink

    I've done it this way (back button works!):

    var sliderStatus = 1;

    var sliderTimer = 3000;

    window.onload = sliderLoop();

    var startSliderLoop = setInterval(sliderLoop, sliderTimer);

    document.getElementById('slider').onmouseenter = function() {

    clearInterval(startSliderLoop);

    };

    document.getElementById('slider').onmouseleave = function() {

    startSliderLoop = setInterval(sliderLoop, sliderTimer);

    };

    document.getElementById("btnslider-back").onclick = function() {

    if(sliderStatus == 1) {

    sliderStatus = 2;

    } else if(sliderStatus == 2) {

    sliderStatus = 3;

    } else if(sliderStatus == 3) {

    sliderStatus = 1;

    }

    sliderLoop();

    };

    document.getElementById("btnslider-next").onclick = sliderLoop;

    function sliderLoop() {

    if (sliderStatus == 1) {

    document.getElementById("imgslider1").style.zIndex = "300";

    document.getElementById("imgslider1").style.right = "0px";

    document.getElementById("imgslider2").style.zIndex = "100";

    document.getElementById("imgslider2").style.right = "-1200px";

    document.getElementById("imgslider3").style.zIndex = "200";

    document.getElementById("imgslider3").style.right = "1200px";

    sliderStatus = 2;

    } else if (sliderStatus == 2) {

    document.getElementById("imgslider2").style.zIndex = "300";

    document.getElementById("imgslider2").style.right = "0px";

    document.getElementById("imgslider3").style.zIndex = "100";

    document.getElementById("imgslider3").style.right = "-1200px";

    document.getElementById("imgslider1").style.zIndex = "200";

    document.getElementById("imgslider1").style.right = "1200px";

    sliderStatus = 3;

    } else if (sliderStatus == 3) {

    document.getElementById("imgslider3").style.zIndex = "300";

    document.getElementById("imgslider3").style.right = "0px";

    document.getElementById("imgslider1").style.zIndex = "100";

    document.getElementById("imgslider1").style.right = "-1200px";

    document.getElementById("imgslider2").style.zIndex = "200";

    document.getElementById("imgslider2").style.right = "1200px";

    sliderStatus = 1;

    }

    }

  • August 14, 2019 at 15:39
    Permalink

    I made both projects with rotating banner and the dropdown menu on a single page, but got a problem with the menu, when i resize the browser the banner is going over the menu. Can you please tell me a solution?

  • August 14, 2019 at 15:39
    Permalink

    Nice tutorials, can u please make a tutorial on 4 or 5 column based div slider, but in this tutorials I unable to get ".imgbanbtn-prev" function I am getting some issue in sliding prev btn image. can u send me the final files on this mail id:rajsha0130@gmail.com

  • August 14, 2019 at 15:39
    Permalink

    I built a reverse slider but now I have a bug. When I test my previous button and on mouse out the first bannerLoop is not running. How to fix it?

  • August 14, 2019 at 15:39
    Permalink

    Sir, you are awesome!
    This helped me a lot. Everywhere are just bootstrap tutorials of carousels or jquery slideshows. But finally a deep tutorial with vanilla JS. Thank you!! But please reupload the solution of the previous button.

  • August 14, 2019 at 15:39
    Permalink

    Its a very good tutorial,
    But i think it will be more simple if you using a for loop instead of writing everythin im fuction and calling each other

  • August 14, 2019 at 15:39
    Permalink

    Can i use this to make an rotating background image by using document.body.style.backgroundImage ='url(img/1.jpeg)' and then switching between vars

  • August 14, 2019 at 15:39
    Permalink

    Authentication is required for downloading the lesson files…… Could you please provide the user name and password?

  • August 14, 2019 at 15:39
    Permalink

    You use function(){ … } a lot, but I can't figure out why. My research tells me this just clears the name space, but that doesn't make sense in your example. What else does it do?

  • August 14, 2019 at 15:39
    Permalink

    Hi Daniël
    Can you help me because when i place this code in the header.php from the video how to make a complete signup system it doens't work

  • August 14, 2019 at 15:39
    Permalink

    having problems when trying link images via css. It just doesnt seem to work. Ive got my images and the path is correct, they are .png but they just dont seem to work. all i get is a white box. I know that the images work because if I do a simple <img src="imagename"> it works. PLEASE HELP!

Leave a Reply