jQuery plugin to achieve seamless carousel

Seamless carousel is a very common effect, and it is very simple once you understand the logic.

The effect is as follows

Code section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Make seamless carousel</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   * {
    margin: 0;
    padding: 0;
    user-select: none;
   }

   #div {
    border: 1px solid lightgray;
    width: 600px;
    height: 300px;
    margin: 20px;
    overflow: hidden;
   }
   .item {
    border: 1px solid lightgray;
    width: 96%;
    height: 50px;
    margin: 10px auto;
   }
  </style>
 </head>
 <body>
  <div id="div">
   <div class="rollbox"></div>
  </div>
 </body>
</html>
<script>
 $(document).ready(function() {
  for (var i = 0; i < 7; i++) {
   var $item = $("<div class='item'>" + i+ "</div>");
   $item.appendTo($("#div .rollbox"));
  }
 })
 //Carousel action$(function() {
  $("#div").roll(1);
 })

 $.prototype.roll = function(span) {
  span = span == undefined ? 20 : span; //Scroll rate var $that = $(this).find('.rollbox');
  var index = 0;
  var t = setInterval(function() {
   $that.css('margin-top', index + 'px');
   index--;
   check();
  }, span)
  //
  $that.mouseenter(function() {
   clearInterval(t);
  })
  $that.mouseleave(function() {
   t = setInterval(function() {
    $that.css('margin-top', index + 'px');
    index--;
    check();
   }, span)
  })
  function check(){
   var first = $that.children().first();
   var top = parseInt(first.css('margin-top').replace('px',''));
   var bottom = parseInt(first.css('margin-bottom').replace('px',''));
   var height =first.height();
   bw = parseInt(first.css('border-width').replace('px',''));
   var temp = index+top+height+bottom;
   if(temp==top-2*bw){
    var last = $that.children().last();
    last.after(first);
    $that.css('margin-top','0px');
    index=0;
   }
  }
 }
</script>

Explanation of ideas

At first, I was going to animate the element directly, but the twists and turns in the middle were a bit annoying, so I just gave it an auxiliary container to wrap all the child elements, and we just let this auxiliary container move up and down.
That is, when you slowly move the auxiliary container upwards, there is already a scrolling effect. Then we determine whether the top container has been completely hidden, and then reset the auxiliary container and put the top element at the bottom.

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:

12 classic white, rich and beautiful types - jquery picture carousel plug-in - a must-have for front-end development
Native js and jquery to achieve image carousel special effects
Jquery code to achieve image carousel effect (I)
Specific implementation of jQuery image carousel
Realizing the picture carousel effect based on JQuery (focus picture)
jQuery to achieve timed automatic carousel effects
Native js and jquery to achieve the fade-in and fade-out effect of image carousel
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

<<: Zabbix uses PSK shared key to encrypt communication between Server and Agent

>>: Analysis of MySQL's method of exporting to Excel