JavaScript super detailed implementation of web page carousel

Creating HTML Pages
Implement the functions of the js part

1. Left and right buttons
2. Dynamically generate small circles
3. Click the small circle and it will change color.
4. Click the small circle to scroll the picture
5. Click the button on the right once to scroll one picture at a time.
6. Click the button on the right, and the small circle will change accordingly.
7. Function creation of the left button

8. Autoplay function

Preface:

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

Creating HTML Pages

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:

Implement the functions of the js part

1. Left and right buttons

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 should 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 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 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)
})

This is the end of this article about the super detailed implementation of web page carousel with JavaScript. For more relevant content about implementing web page carousel with JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: