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 responses to “33: How to create a rotating banner using JavaScript – Learn JavaScript front-end programming”

  1. 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;

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

  3. 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!

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

  5. 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;

    }

    }

  6. 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?

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

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

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