LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    Slideshow
    



    

Mountain Spiral


CSS
        img {
            margin-top: 50px;
            box-shadow:0 5px 8px 0 rgba(0, 0, 0, 0.19), 0 5px 15px 0 rgba(0, 0, 0, 0.19);
        }

        #start { /*button*/
            display: block;
            padding: 10px 7px;
            border-width: 0;
            border-radius: 2px;
            background-color: #64B5F6;
            color: #212121;
            font-size: 15px;
            font-weight: 600;
            transition: background-color .3s;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .set {
            margin: auto;
            display: block;
        }
        #caption{
            text-align: center;
            padding: 15px 0px;
            display: block;
        }
        h1 {
            display: block;
            margin: auto;
            font-family: sans-serif;
        }
JS
var baseImg = document.getElementById("baseImg"),
    caption = document.getElementById("caption"),
    start = document.getElementById("start");
//get id's from HTML file
var imgSet = ["https://images.pexels.com/photos/348097/pexels-photo-348097.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/355770/pexels-photo-355770.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/300857/pexels-photo-300857.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/287229/pexels-photo-287229.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/655674/pexels-photo-655674.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
              "https://images.pexels.com/photos/206660/pexels-photo-206660.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"
], //creates array with all images
    captionSet = ["Winter", "Crisp Morning Fog", "Rugged Winter Mountains",
                  "Frozen Lake", "Mountain Spiral", "Summer Approach",
                  "Sunlit Ridge", "Winding River"
]; //creates caption array
baseImg.src = imgSet[4]; //set default image before slideshow
start.addEventListener("click", function () { //when input button is clicked...
    setInterval(function () { /*interval every x seconds (is similiar to infinite loop)*/
        var randIndex = Math.floor(Math.random() * imgSet.length); /*creates random pattern with max being length of array (8)*/
        var selectImg = imgSet[randIndex]; // creates variable that is set to array position of random variable
        var randCap = captionSet[randIndex]; // creates variable that is set to the array caption with the position being the random variable
        baseImg.src = selectImg; // displays array[random] position
        
        caption.innerHTML = randCap; // displays caption[random] position
    }, 3000); //cycle every 3 seconds

}, false);

Description

changes to new image every 2 seconds
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv