Ask your Question

Write to us

Ask Question

Set Interval Of Multiple Divs in HTML Along With Common Loop For All Set

Ajeet Kumar Yadav

Hello Guys It's a long time back ago to share my knowledge source and real time challenge that i have faced in my company, Now I am Back With Another Interesting Topic to share with you. This is basically about the set interval function of JavaScript wrapped in a loop of three div set. The Most Simple way of scrolling images is using slider is to use multiple plugins from any site. But What happen when someone asks you to scroll all images simultaneously in a common div set and repeat next div after some interval. Here Is my experience with following demo example that i have created For You and is Successfully Launched Somewhere .

See the Demo Here For Slider With Seven Set Of Images.

http://digitaltask.in/projects/storyline-nuluv/slidemagic.html.

NOTE :- For Sliding Effects I Have Used Css Keyframes From W3c Schools

https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

// javascript Code here //

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("storytabs");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
        jQuery("div.innerright").removeClass("slideright");
        jQuery("div.halftopdv").removeClass("slidhalfrgt");
        jQuery("div.innerleft").removeClass("slideright");
        jQuery("div.tofive").removeClass("slideleft");
    }
    myIndex++;
    if (myIndex > x.length) {
        myIndex = 1
    }
    x[myIndex - 1].style.display = "block";
    setTimeout(carousel, 5000); // Change image every 2 seconds 
   jQuery("div.innerright").addClass("slideright"); 
   jQuery("div.halftopdv").addClass("slidhalfrgt"); 
   jQuery("div.innerleft").addClass("slideright"); 
   jQuery("div.tofive").addClass("slideleft");
 }
// This is just a sample script. Paste your real code (javascript or HTML) here.

    if ('this_is' == /an_example/) {
        of_beautifier();
    } else {
        var a = b ? (c % d) : e[f];
    }

Ajeet Kumar Yadav