Using jQuery to implement the carousel effect

What I bring to you today is to use jQuery to implement a simple carousel. The principle of implementation is:

1. In an area, set the width and height. If the area exceeds this part, a hidden

2. Get the image size as 300, and the index starts at 0

3. When you click the button on the right, you need to add 1 to the index of the button you clicked. Add 1 to the index multiplied by the size of the image + px

4. When it slides, add an animate animation effect and it will be great

5. The effect on the right is the same as that on the left.

<!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>Carousel Image</title>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <style type="text/css">
     *{
      padding: 0;
      margin: 0;
     }
     .uli{
   width: 300px;
      height: 300px;
   display: flex;
   overflow: hidden;
     }
     .uli li>img{
      position: relative;
      left: 0px;
      top: 0px;
      height: 300px;
     }
     .uli li{
      width: 300px;
      height: 300px;
      list-style:none;
     }
     .a1{
      position: absolute;
      top: 100px;
      left: 0;
      cursor: pointer;
      font-size: 50px
     }
     .a2{
      position: absolute;
      top: 100px;
      left: 260px;
      cursor: pointer;
      font-size: 50px
     }
    </style>
</head>
<body>
 <!-- Set the number of pictures and drinks in ul li -->
    <ul class="uli">
     <li><img src="./img/大冰黑茶.png" alt=""></li>
     <li><img src="./img/Big Honey Green Tea.png" alt=""></li>
     <li><img src="./img/大龙井绿茶.png" alt=""></li>
    </ul>
 <!-- The spans in the two divs control the click events of the sticky note on the right and the label on the left -->
    <div class="pa1"> 
     <span class="a1"><</span>
     <span class="a2"> </span>
    </div>
    <script type="text/javascript">
 // Write an entry function $(function(){
   // Set the image size var img = 300;
   // Set the index to 0 
      var index = 0;
   // Set the length of the number of pictures var option = $('.uli>li img').length;
      // The left part starts $('.a2').click(function(){
    // Then click the event to execute the callback function left()
      })
   // Function name lest 
      function left(){
    // The index value of index is 0. When it is less than the length of the image, let it execute ++ option to execute minus 1, otherwise there will be a blank page if (index < option-1) {
                     index++
                }else {
                 index = 0
                }
                move()
      }
      // The left part ends // The right part starts $('.a1').click(function(){
    // Then click the event to execute the callback function right()
      })
      function right(){
    // The index value of index is 0. When it is greater than the length of the image, it will be executed-- 
       if (index > 0) {
        index--
       }else {
        index = option-1
       }
       move()
      }
   // There are move functions in the right and left functions, which means that when you click on your index, the number of images will slide over 500 as the time. function move(){
               var a = -index * img + 'px'
               $('.uli li>img').animate({'left':a},500)
      }
     })
    </script>
</body>
</html>

This is the code above. You can try it out with a small example.

Let’s take a look at the renderings.

The video can't be played, only the pictures can be seen.

This is the current situation.

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:

jQuery implements carousel map detailed explanation and example code
Using jQuery to write left and right carousel effects
jQuery implements seamless left and right carousel
jQuery implements carousel chart and its principle detailed explanation
jQuery plugin slides to achieve seamless carousel effects
jQuery implements left and right sliding carousel
jQuery adaptive carousel plug-in Swiper usage example
JQuery and html+css to achieve a carousel with small dots and left and right buttons
Simple carousel function implemented by jQuery [suitable for beginners]
Implementing fade-in and fade-out effect carousel based on jQuery

<<: Detailed explanation of the problem of matching even when there is a space at the end of the string in the Mysql query condition

>>: Summary of pitfalls in importing ova files into vmware