Using js to achieve the effect of carousel

Using js to achieve the effect of carousel

Today, let's talk about how to use js to achieve the effect of the carousel map for your reference. The specific content is as follows

Ideas

1. First we need to get the elements we need

<div class="all" id="box">
        <div class="screen">
            <!-- Unordered list -->
            <ul> 
                <li><img src="./wf1.jpg" width="500" height="200" /></li>
                <li><img src="./wf2.jpg" width="500" height="200" /></li>
                <li><img src="./wf3.jpg" width="500" height="200" /></li>
                <li><img src="./wf4.jpg" width="500" height="200" /></li>
                <li><img src="./wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- Ordered list -->
            <ol>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>

2. We want the slideshow to execute wherever we click on it and change its color

3. Add left and right arrow keys to the carousel to switch up and down

4. Make the carousel move on its own

operate

1. First get the elements and the carousel effects you need

1. First get the ul (photo), ol (click box), and nth (left and right buttons) you need.

var ul = document.querySelector('ul')
var ol = document.querySelector('ol')
var nth = document.querySelector('#arr')
var box = document.querySelector('#box')
var left = document.querySelector('#left')
var right = document.querySelector('#right')

2. Encapsulate the animation effect, which will be used later

 // Perform position animation encapsulation call function animate(element,offset,setp,times){
                    // Delete if true to prevent multiple triggers if(element.jsq){
                        clearInterval(element.jsq)
                    }
                    // Get the current offset
                    var position = ul.offsetLeft
                    // If the moving position is smaller than the current position, the step length is negative if (offset < position) {
                        setp=-setp
                    }
                    // Start the gap timer if(Math.abs(position-offset)>Math.abs(setp)){
                        element.jsq = setInterval(() => {
                        position+=setp
                        element.style.left=position+'px'
                        // If the current position value is within one step of the pre-set position, stop the timer if (Math.abs(position-offset)<Math.abs(setp)){
                            clearInterval(element.jsq)
                            element.style.left=offset+'px'
                        }
                    }, times);
                    }
                }

Animation steps:

1. When passing in, check whether there is a timer. If so, clear it to prevent multiple timers from coexisting.

2. Determine whether the position to be moved to is greater than the original position. If it is greater, setp will increase it. If it is less, subtract the step size each time.

3. Start the timer and move

4. When the distance between the current position and the predetermined position is less than the step length, the timer ends and the position is set to the predetermined position to prevent repeated sideways jumping.

2.ol add content, add click events, move pictures, and change button colors

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Set custom attributes for each li li.setAttribute('a',i)
            ol.appendChild(li)
            // Set a click event for each li under ol ol.children[i].onclick=function(){
                // Loop so li performs exclusive thinking for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Add the class attribute this.className='current' to the currently clicked element
                // Get the value of the custom attribute of the currently clicked li to see which one is clicked var index=this.getAttribute('a')
                console.log(index)
                // Check the width of each photo var imgwidth = ul.children[0].offsetWidth
                // Multiply the width by the number of frames to get the amount of movement offset = index * - imgwidth
                //Call the animation function animate(ul,offset,50,30)

1. Use a for loop to create the same number of buttons as the number of photos. Use setAttribute('a', i) to create a new custom attribute and add it to ol. You will need it later.

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Set custom attributes for each li li.setAttribute('a',i)
            ol.appendChild(li)
}

2. Add binding events to all buttons in this loop, so that the current button changes color and the others have no color. Exclusive idea , every time you click, the current one has color and the others are cleared

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Set custom attributes for each li li.setAttribute('a',i)
            ol.appendChild(li)
 
        //New// Set a click event for each li below ol.children[i].onclick=function(){
                // Loop so li performs exclusive thinking for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Add the class attribute this.className='current' to the currently clicked element

3. Get the value of the custom attribute of the currently clicked element , save it, and use it to set the offset of the page . Multiply the currently clicked value by each photo to get the offset of ul . Remember to add a minus sign, because ul should move to the left, not the viewport. Then call the animation function we wrote before.

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Set custom attributes for each li li.setAttribute('a',i)
            ol.appendChild(li)
            // Set a click event for each li under ol ol.children[i].onclick=function(){
                // Loop so li performs exclusive thinking for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Add the class attribute this.className='current' to the currently clicked element
 
        //New// Get the value of the custom attribute of the currently clicked li to see which one is clicked var index=this.getAttribute('a')
                console.log(index)
                // Check the width of each photo var imgwidth = ul.children[0].offsetWidth
                // Multiply the width by the number of frames to get the amount of movement offset = index * - imgwidth
                //Call the animation function animate(ul,offset,50,30)

Results

3. Add previous and next buttons to the carousel

(I won’t write the CSS style here, I will give it at the end, just imagine it first. The CSS is hidden at the beginning)

1. We have already obtained various elements at the beginning, so we don’t need to obtain them now . Just write the events for entering and leaving respectively.

// Mouse enters event box.onmousemove=function(){
        nth.style.display='block'
    }   
    // Mouse leaves the event box.onmouseleave=function(){
        nth.style.display='none'
    }

2. Get the current page , set the click event, next ++ previous --, and then apply the previous onclick effect

for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Set custom attributes for each li li.setAttribute('a',i)
            ol.appendChild(li)
            // Set a click event for each li under ol ol.children[i].onclick=function(){
                // Loop so li performs exclusive thinking for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Add the class attribute this.className='current' to the currently clicked element
                // Get the value of the custom attribute of the currently clicked li to see which one is clicked var index=this.getAttribute('a')
                console.log(index)
                // Check the width of each photo var imgwidth = ul.children[0].offsetWidth
                // Multiply the width by the number of frames to get the amount of movement offset = index * - imgwidth
                //Call the animation function animate(ul,offset,50,30)

                 // New // Click event, index is the value of the custom class name of the currently clicked sequence left.onclick=function(){
                if(index>0){
                    index--
                }
                ol.children[index].click()
                }
                right.onclick=function(){
                
                    if(index<4){
                        index++
                    }
                ol.children[index].click()
                }
 
            }               
}

Because the value in the click event cannot be obtained from outside, I will just write

You can also call events in events, such as ol.children[index].click(). Remember to add parentheses and remove on.

3. When ol.onclick is not triggered (no 1, 2, 3, 4, 5 below is clicked), clicking left and right will not work, so a piece of code should be added to the script

var Click=0
 
    right.onclick=function(){
        Click++
        if(Click==1){
          ol.children[1].click()
        }
    }

At this point, the third part of the operation is completed.

4. Make the carousel move on its own

// Automatic movement // 1. First we need to add color to the first button at the beginning ol.children[0].className='current'
    // 2. Start the timer and switch every 5 seconds setInterval(function(){
        var position = ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var indexs = Math.abs(position/imgwidth)
        //3. Get the current position and the length of the image, and divide them to get the index if (indexs>3) {
            indexes=-1
        }
        ol.children[indexs+1].click()
        // Be sure to add 1 when jumping
        },5000)

1. First we need to add color to the first button at the beginning, and delete the exclusive idea afterwards.

2. Get the subscript. Add 1 to jump. Otherwise, jump in place. The second circle starts at -1, not 0, so it should be +1.

We can get the result we want.

Overall code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }
 
        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
 
        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
 
        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }
 
        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }
 
        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
 
        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
 
        .all ol li.current {
            background: yellow;
        }
 
        #arr {
            display: none;
            z-index: 1000;
 
        }
 
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: 'bold';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
 
        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
    <div class="all" id="box">
        <div class="screen">
            <!-- Unordered list -->
            <ul> 
                <li><img src="./wf1.jpg" width="500" height="200" /></li>
                <li><img src="./wf2.jpg" width="500" height="200" /></li>
                <li><img src="./wf3.jpg" width="500" height="200" /></li>
                <li><img src="./wf4.jpg" width="500" height="200" /></li>
                <li><img src="./wf5.jpg" width="500" height="200" /></li>
            </ul>
            <!-- Ordered list -->
            <ol>
 
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>
    <script>
        // Perform position animation encapsulation call function animate(element,offset,setp,times){
                    // Delete if true to prevent multiple triggers if(element.jsq){
                        clearInterval(element.jsq)
                    }
                    // Get the current offset
                    var position = ul.offsetLeft
                    // If the moving position is smaller than the current position, the step length is negative if (offset < position) {
                        setp=-setp
                    }
                    // Start the gap timer if(Math.abs(position-offset)>Math.abs(setp)){
                        element.jsq = setInterval(() => {
                        position+=setp
                        element.style.left=position+'px'
                        // If the current position value is within one step of the pre-set position, stop the timer if (Math.abs(position-offset)<Math.abs(setp)){
                            clearInterval(element.jsq)
                            element.style.left=offset+'px'
                        }
                    }, times);
                    }
                }
    // 1. Get the element var ul = document.querySelector('ul')
    var ol = document.querySelector('ol')
    var nth = document.querySelector('#arr')
    var box = document.querySelector('#box')
    var left = document.querySelector('#left')
    var right = document.querySelector('#right')
    // 2. Add click elements in ol // Add li in ol loop
    for(var i=0;i<ul.children.length;i++){
        var li = document.createElement('li')
            li.innerHTML=i+1
            // Set custom attributes for each li li.setAttribute('a',i)
            ol.appendChild(li)
            // Set a click event for each li under ol ol.children[i].onclick=function(){
                // Loop so li performs exclusive thinking for(var i=0;i<ol.children.length;i++){
                    ol.children[i].className=''
                }
                // Add the class attribute this.className='current' to the currently clicked element
                // Get the value of the custom attribute of the currently clicked li to see which one is clicked var index=this.getAttribute('a')
                console.log(index)
                // Check the width of each photo var imgwidth = ul.children[0].offsetWidth
                // Multiply the width by the number of frames to get the amount of movement offset = index * - imgwidth
                //Call the animation function animate(ul,offset,50,30)
                // Click event, index is the value of the custom class name of the currently clicked sequence number left.onclick=function(){
                if(index>0){
                    index--
                }
                ol.children[index].click()
                }
                right.onclick=function(){
                
                    if(index<4){
                        index++
                    }
                ol.children[index].click()
                }
            }               
    }
 // Mouse enters event box.onmousemove=function(){
        nth.style.display='block'
    }   
    // Mouse leaves the event box.onmouseleave=function(){
        nth.style.display='none'
    }
     //Mouse right click event var Click=0
 
    right.onclick=function(){
 
        Click++
 
        if(Click==1){
 
          ol.children[1].click()
 
        }
 
    }
 
    
 
// Automatic movement // 1. First we need to add color to the first button at the beginning ol.children[0].className='current'
    // 2. Start the timer and switch every 5 seconds setInterval(function(){
        var position = ul.offsetLeft         
        var imgwidth=ul.children[0].offsetWidth         
        var indexs = Math.abs(position/imgwidth)
        //3. Get the current position and the length of the image, and divide them to get the index if (indexs>3) {
            indexes=-1
        }
        ol.children[indexs+1].click()
        // Be sure to add 1 when jumping
        },5000)
    </script>
</body>
</html>

Remember to change the path to the image.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JavaScript to implement simple carousel chart most complete code analysis (ES5)
  • Native js to achieve simple carousel effect
  • Using JavaScript to implement carousel effects
  • Implementing carousel effects with JavaScript
  • js to implement the complete code of the carousel
  • Sample code for implementing carousel with native js
  • js to achieve the effect of supporting mobile phone sliding switch carousel picture example
  • JS carousel diagram implementation simple code
  • js to achieve click left and right buttons to play pictures
  • JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)

<<:  MySQL joint table query basic operation left-join common pitfalls

>>:  MySQL trigger syntax and application examples

Recommend

A brief discussion on the problem of Docker run container being in created state

In a recent problem, there is such a phenomenon: ...

js realizes packaging multiple pictures into zip

Table of contents 1. Import files 2. HTML page 3....

A brief discussion on the efficiency of MySQL subquery union and in

Recent product testing found a problem that when ...

A screenshot demo based on canvas in html

Written at the beginning I remember seeing a shar...

Explanation of the basic syntax of Mysql database stored procedures

drop procedure sp_name// Before this, I have told...

Some simple implementation codes of the form element take registration as an example

Code implementation: Copy code The code is as fol...

Implementation of form submission in html

Form submission code 1. Source code analysis <...

Docker large-scale project containerization transformation

Virtualization and containerization are two inevi...

Introducing icons by implementing custom components based on Vue

Preface In project development, there are many wa...

Media query combined with rem layout in CSS3 to adapt to mobile screens

CSS3 syntax: (1rem = 100px for a 750px design) @m...

MySQL performance optimization index pushdown

Index condition pushdown (ICP) is introduced in M...

It's the end of the year, is your MySQL password safe?

Preface: It’s the end of the year, isn’t it time ...

MySQL 5.7.17 installation and configuration method graphic tutorial under Windows 10

In this article, I will explain in detail how to ...

How to add a paging navigation bar to the page through Element UI

need Add a paging bar, which can jump to the page...

Detailed explanation of the properties and functions of Vuex

Table of contents What is Vuex? Five properties o...