Detailed explanation of six web page image carousel effects implemented with JavaScript

Detailed explanation of six web page image carousel effects implemented with JavaScript

On web pages, we often see various carousel effects. How are they achieved? Let’s take a look at it together today! First, we need to prepare several pictures. Here I have prepared five pictures.

Functional requirements:

When the mouse passes over the carousel module, the left and right buttons are displayed, and when it leaves the module, the left and right buttons are hidden.

Click the button on the right once, and the picture will play one to the left, and so on, the same applies to the button on the left.

While the picture is playing, the small circle module below changes accordingly.

Click the small circle to play the corresponding picture.

The carousel will automatically play pictures even if the mouse does not pass over the carousel.

When the mouse moves over the carousel module, automatic playback stops.

Our page layout is as follows:

Next, we will implement the functions step by step

Create an HTML page first

The implementation process is: first give a large box, and then give it a relative position to facilitate the positioning operation of the subsequent boxes. Add the pictures to the large box in the form of an unordered list. Because the carousel effect we want to achieve is horizontal, we can add the float:left attribute to the picture. Because the ul where the picture is located is not big enough, other pictures will be squeezed below, so we can manually modify the size of the ul where the picture is located; next, write an unordered list to place small circles, and position it below the large box through absolute positioning. Then add the small circles to facilitate us to achieve the effect of clicking the corresponding small circle to jump to the corresponding picture. Then use absolute positioning to position the left and right arrows at the appropriate positions on both sides of the big box. Finally, we hide the content outside the big box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" rel="external nofollow" >
</head>
<body>
    <div class="box">
        <a href="" class = 'left jiantou'>&lt;</a>
        <a href="" class = 'right jiantou'>&gt;</a>
        <ul class = 'pic'>
            <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/3.jpg" alt=""></a>
            </li>
            <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/4.jpg" alt=""></a>
            </li>
             <li>
                <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="./images/5.jpg" alt=""></a>
            </li>
        </ul>
        <ul class="lis">
            <li></li>
            <li class = 'selected'></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

css file

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box{
    position: relative;
    overflow: hidden;
    margin: 100px auto;
    width: 520px;
    height: 280px;
    background-color: red;
}
.jiantou{
    font-size: 24px;
    text-decoration: none;
    display: block;
    text-align: center;
    width: 20px;
    height: 30px;
    line-height: 30px;
    background: rgba(158, 154, 154, 0.7);
    color: white;
    z-index: 999;
}
.left{
    position: absolute;
    top: 125px;
    left: 0px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.right{
    position: absolute;
    top:125px;
    left: 500px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
img{
    width: 520px;
    height: 280px;
}
.box .pic{
    width: 600%;
}
.pic li {
    float: left;
}
.lis{
   position: absolute;
   bottom: 15px;
   left: 50%;
   margin-left: -35px;
   width: 70px;
   height:13px;
   border-radius: 7px; 
   background: rgba(158, 154, 154, 0.7);
}
.lis li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: #fff;
   
}
.lis .selected{
    background-color: cyan;
}

The page effect is now:

Then implement the functions of the js part.

1. When the mouse passes over the carousel module, the left and right buttons are displayed, and when leaving the module, the left and right buttons are hidden.

First, we use display:none to hide the two initial arrows; then we get the two arrows and the big box, and add mouse over and mouse leave events to the big box. As shown below:

 var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('mouseenter',function(){
        left.style.display = 'block';
        right.style.display = 'block';
    })
    box.addEventListener('mouseleave',function(){
        left.style.display = 'none';
        right.style.display = 'none';
    })

The effect is:

2. Dynamically generate small circles

First delete all the small circle li, as shown in the figure:

Because the small circles we create are determined by the number of pictures, our core idea is: the number of small circles must be consistent with the number of pictures. First, get the number of pictures in ul (the pictures are placed in li, so it is the number of li), and then use the loop to dynamically create nodes createElement('li') and insert nodes ul. appendChild(li) to generate small circles (this small circle should be placed in ul). Note that the first small circle needs to add the selected class.

The implementation code is:

var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    for(var i = 0;i<pic.children.length;i++){
        var li = document.createElement('li');
        lis.appendChild(li);
    }
    lis.children[0].className = 'selected';

The effect is:

3. Click the small circle and it will change color.

While generating the small li, add click events to the small circles based on the exclusive idea. When the corresponding small circle is clicked, add the selected class to it, and delete the selected class from the remaining small circles.

The code is:

li.addEventListener('click',function(){
            for(var i =0;i<lis.children.length;i++){
                lis.childern[i].className = '';
            }
            this.className = 'selected';
        })

The effect is:

4. Click the small circle to scroll the picture

The animation function is used here. I have already talked about how to encapsulate the animation function. I will not repeat it here and will quote it directly. But be careful to put the js file of the animation function above our index.js. And because the animation function can only be used after the positioned elements are added, we also need to add positioning to the pic ul. Then according to the rule, we found that when we click on a small circle, the scrolling distance of ul is: the index number of the small circle multiplied by the width of the image. (Because the picture is going to the left, it is a negative value) So we need to know the index number of the small circle. We can set a custom attribute for it when generating the small circle, and get this custom attribute when clicking it.

First set the index when generating li:

li.setAttribute('index',i);

Then, when adding a click event to li, get the index, get the image width, and call the animation function:

li.addEventListener('click',function(){
    var boxWidth = box.offsetWidth;
    //Get the index number var index = this.getAttribute('index');
    for(var i = 0;i<lis.children.length;i++){
        lis.children[i].className = '';
    }
    this.className = 'selected';
    animate(pic,-index*boxWidth)
})

The effect is:

5. Click the button on the right once to scroll one picture at a time.

You can directly add a click event to the right button, declare a variable num, click it once, and increment it by 1. Multiply this variable by the width of the image, which is the scrolling distance of ul.

var num = 0;
    right.addEventListener('click',function(){
        num++;
        animate(pic,-num*boxWidth);
    })

The effect is:

We found that when clicking the button on the right, the picture switching effect can be achieved, but when clicking on the last picture, it will stay on the initial background of the display page, which is not beautiful, so we can use the principle of seamless scrolling of pictures to make the pictures scroll seamlessly. The operation method is as follows. Add a copy of the first li in the .pic list through cloneNode(true), and then copy it to the end of the list through appendChild(). Then add a judgment condition to num in the js page, that is, when the value of num is equal to the number of elements in this list - 1, let the distance moved by ul become 0, and let num be equal to 0.

The code is:

var first = pic.children[0].cloneNode(true);
    pic.appendChild(first);
    //Function of the right button var num = 0;
    right.addEventListener('click',function(){
        if(num == pic.children.length-1){
            pic.style.left = 0;
            num = 0;
        }
        num++;
        animate(pic,-num*boxWidth);
    })

The effect is:

Successfully achieved.

6. Click the button on the right, and the small circle will change accordingly.

What needs to be done is: declare another variable circle, and increment it by 1 each time the right button is clicked, because this effect will also be achieved when we click the left button, and this variable is also needed, so a global variable needs to be declared. However, there are 5 pictures, and we only have 4 small circles, one less, so we must add a judgment condition. If circle == 4, it will be restored to 0.

 var num = 0;
var circle = 0;
  right.addEventListener('click',function(){
      if(num == pic.children.length-1){
          pic.style.left = 0;
          num = 0;
      }
      num++;
      animate(pic,-num*boxWidth);
      circle++;
      if(circle == lis.children.length){
          circle = 0;
      }
      for(var i =0;i<lis.children.length;i++){
          lis.children[i].className = '';
      }
      lis.children[circle].className = 'selected';
  })

The running results are:

But there are still some small problems. When we combine the small circle with the button on the right, we will find an error, as follows:

When we click on the small dots, we can also jump to the corresponding picture page, but when we continue to click the button on the right, we will find that the small dots below do not correspond to the corresponding pictures. This is controlled by the variable num when we click the right button, and the num variable has nothing to do with the click event of the small circle, so there is a difference.

Our solution is to get the index number every time the small li is clicked, and then change the values ​​of num and circle to the values ​​of the obtained index number. The code is:

var index = this.getAttribute('index');
num = index;
circle = index;

The effect is:

7. Function creation of the left button

The method is similar to the button on the right, so I won’t go into details. The code is as follows:

left.addEventListener('click',function(){
        if(num == 0){
            num = pic.children.length-1;
            pic.style.left = -num*boxWidth+'px';
            
        }
        num--;
        animate(pic,-num*boxWidth);
        circle--;
        if(circle <0){
            circle = lis.children.length-1;
        }
        for(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = 'selected';
    })

The effect is:

8. Autoplay function

In fact, adding a timer to automatically play the carousel is similar to clicking the button on the right. At this time, we use the manual call to the right button click event right.click(). The timer stops when the mouse passes over the picture, and starts when the mouse leaves the picture.

var timer = this.setInterval(function(){
  right.click();
 },2000)

The effect is:

The complete index.js code is:

window.addEventListener('load',function(){
    var left = document.querySelector('.left');
    var right = document.querySelector('.right');
    var box = document.querySelector('.box');
    box.addEventListener('mouseenter',function(){
        left.style.display = 'block';
        right.style.display = 'block';
    })
    box.addEventListener('mouseleave',function(){
        left.style.display = 'none';
        right.style.display = 'none';
    })
    var pic = document.querySelector('.pic');
    var lis = document.querySelector('.lis');
    var boxWidth = box.offsetWidth;
    for(var i = 0;i<pic.children.length;i++){
        
        var li = document.createElement('li');
        lis.appendChild(li);
        //Set the index number li.setAttribute('index',i);
        li.addEventListener('click',function(){
            //Get the index number var index = this.getAttribute('index');
            num = index;
            circle = index;
            for(var i = 0;i<lis.children.length;i++){
                lis.children[i].className = '';
            }
            this.className = 'selected';
            animate(pic,-index*boxWidth)
        })
    }
    lis.children[0].className = 'selected';
    //Clone the first li
    var first = pic.children[0].cloneNode(true);
    pic.appendChild(first);
    var num = 0;
    var circle = 0;
    //Function of the right buttonright.addEventListener('click',function(){
        if(num == pic.children.length-1){
            pic.style.left = 0;
            num = 0;
        }
        num++;
        animate(pic,-num*boxWidth);
        circle++;
        if(circle == lis.children.length){
            circle = 0;
        }
        for(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = 'selected';
    })
    //Left button function left.addEventListener('click',function(){
        if(num == 0){
            num = pic.children.length-1;
            pic.style.left = -num*boxWidth+'px';
            
        }
        num--;
        animate(pic,-num*boxWidth);
        circle--;
        if(circle <0){
            circle = lis.children.length-1;
        }
        for(var i =0;i<lis.children.length;i++){
            lis.children[i].className = '';
        }
        lis.children[circle].className = 'selected';
    })
    var timer = this.setInterval(function(){
        right.click();
    },2000)
})

So far, all the functions of our carousel have been realized. Have you learned it? 

The above is the detailed content of the detailed explanation of how to achieve six kinds of web page image carousel effects with JavaScript. For more information about JavaScript web page image carousel, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • JS realizes simple picture carousel effect
  • javascript to realize the scroll wheel carousel picture
  • JS implements simple automatic image rotation
  • Js picture click switch carousel implementation code
  • JavaScript to achieve the complete code of the carousel image
  • Native js realizes clicking carousel to switch pictures
  • JavaScript to achieve image carousel special effects

<<:  MySQL database index order by sorting detailed explanation

>>:  One line of code solves various IE compatibility issues (IE6-IE10)

Recommend

Vue improves page response speed through lazy loading

Table of contents Overview What is lazy loading? ...

CSS3 gradient background compatibility issues

When we make a gradient background color, we will...

Tutorial on installing Android Studio on Ubuntu 19 and below

Based on past experience, taking notes after comp...

MySQL data type selection principles

Table of contents Small but beautiful Keep it sim...

Summary of various common join table query examples in MySQL

This article uses examples to describe various co...

Implementation code of Nginx anti-hotlink and optimization in Linux

Hide version number The version number is not hid...

Elements of user experience or elements of web design

System and user environment design <br />Th...

The implementation principle of Tomcat correcting the JDK native thread pool bug

To improve processing power and concurrency, Web ...

Detailed explanation of Nginx Location configuration (Location matching order)

Location means "positioning", which is ...

Linux common commands chmod to modify file permissions 777 and 754

The following command is often used: chmod 777 文件...

VMware pro15 installation macOS10.13 detailed installation diagram (picture and text)

The editor recently wanted to get started with th...

A brief discussion on MySQL temporary tables and derived tables

About derived tables When the main query contains...

Example code for element multiple tables to achieve synchronous scrolling

Element UI implements multiple tables scrolling a...

MySQL grouping queries and aggregate functions

Overview I believe we often encounter such scenar...

How to add interface listening mask in Vue project

1. Business Background Using a mask layer to shie...