Carousel automatically plays-timer version

Article directory

- Timer introduction
1. Enable timer function
2. Close timer function
- Carousel automatically plays
1. html part
2. css modification part
3. Js decoration part
- Complete code display
- summary

Timer introduction

In Javascript, timers use intermittent functions to implement repeated execution of code. The timer function is mainly used to turn on the timer function and turn off the timer function.

Turn on the timer function: setInterval(function, interval), where the interval is milliseconds, 1 second = 1000 milliseconds. Function: Call this function every period of time. The timer returns an ID number (mainly used to turn off the timer).
```
setInterval(function(){console.log('Executed once per second')}, 1000)
```
Close the timer function: clearInterval (variable name). Syntax: let variable name = setInterval(function, interval) clearInterval(variable name)
```
let n = setInterval(function () {console.log('Execute once per second')}, 1000)
clearInterval(n)
```

Carousel automatically plays

html part

<div class="slider">
        <div class="slider-wrapper">
            <img src="../images/2.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>Cherish every little bit every day</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev"> & amp;lt;</button>
                <button class="next"> & amp;gt;</button>
            </div>
        </div>
    </div>

css part

 * {
            box-sizing: border-box;
        }
        
        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }
        
        .slider-wrapper {
            width: 100%;
            height: 320px;
        }
        
        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }
        
        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }
        
        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        
        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }
        
        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
        
        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }

Js part analysis: 1. Prepare an array object, which contains the detailed information that needs to be replaced; 2. Get the elements through document.querySelector in JS; 3. Set the timer function, define a variable of 0, and then set it Put the variable into the function to perform the self-increment operation, then find the object corresponding to the variable, replace the information, and finally activate the dot, highlight the class name in one place, and add the corresponding dot to the current variable to add the class (the array is from Calculation starts from 0, and the variables also start from 0, but the small dots are calculated from 1, so the variable value needs to be added by 1); 4. Process the picture to automatically restore and play from the beginning (put it after the variable is added), if the variable is larger than the array The length indicates that the picture has been played to the last one, and then the variable is reset to 0.

 // 1. Initial data
        const sliderData = [{
            url: '../images/2.jpg',
            title: 'Cherish every moment, every day',
            color: 'rgb(100, 67, 68)'
        }, {
            url: '../images/3.jpg',
            title: 'Afraid that it will suddenly be too late to love you properly',
            color: 'rgb(43, 35, 26)'
        }, {
            url: '../images/4.jpg',
            title: 'The hour hand keeps counting down',
            color: 'rgb(36, 31, 33)'
        }, {
            url: '../images/5.jpg',
            title: 'Our remaining happiness',
            color: 'rgb(139, 98, 66)'
        }, {
            url: '../images/6.jpg',
            title: 'The enthusiasm of embracing each other at this moment',
            color: 'rgb(67, 90, 92)'
        }, {
            url: '../images/1.jpg',
            title: 'But always profound',
            color: 'rgb(166, 131, 143)'
        }, {
            url: '../images/7.jpg',
            title: '--Deng Ziqi's "Countdown"',
            color: 'rgb(53, 29, 25)'
        }, ]
        const img = document.querySelector('.slider-wrapper img')
        const p = document.querySelector('.slider-footer p')
        const bgc = document.querySelector('.slider-footer')
        let i = 0

        function fn() {
            i++
            // Seamless scroll position
            if (i >= sliderData.length) {
                i = 0
            }
            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title
            bgc.style.backgroundColor = sliderData[i].color
                // Delete the original active first
            document.querySelector('.slider-indicator .active').classList.remove('active')
                // Only let the current li add active
            document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
        }
        setInterval(fn, 1000)

Complete code display

`




    
    
    
    Click to switch the carousel image
    



    
        
            
        
        
            Is it too advanced for humans?

Summary

When using the start timer function, please note: the function name does not need to be enclosed in parentheses (the following code is a special case and is not recommended to be used)

function fn() {
    console.log('Executed once per second')
}
setInterval('fn()' , 1000)

)