SOURCE

$(document).ready(function() {
  var spacing = 90;

  function createControl(src) {
    return $('<img/>')
      .attr('src', src)
      .attr("width", 80)
      .attr("height", 60)
      .addClass('control')
      .css('opacity', 0.6)
      .css('display', 'none');
  }

  var $leftRollover = createControl('https://i.loli.net/2020/05/29/7IhOldLVjnpf9P5.gif');
  var $rightRollover = createControl('https://i.loli.net/2020/05/29/SRAg1xLZfhk7YcP.gif');

  $('#container').css({
    'width': spacing * 3,
    'height': '70px',
    'overflow': 'hidden'
  }).find('.box a').css({
    'float': 'none',
    'position': 'absolute',
    'left': 1000
  });

  var setUpbox = function() {
    var $box = $('#container .box a');
    $box.unbind('click mouseenter mouseleave');
    $box.eq(0)
      .css('left', 0)
      .click(function(event) {
      $box.eq(0).animate({
        'left': spacing
      },
      'fast');
      $box.eq(1).animate({
        'left': spacing * 2
      },
      'fast');
      $box.eq(2).animate({
        'left': spacing * 3
      },
      'fast');
      $box.eq($box.length - 1)
        .css('left', -spacing)
        .animate({
        'left': 0
      },
      'fast', function() {
        $(this).prependTo('#container .box');
        setUpbox();
      });
      event.preventDefault();
    }).hover(function() {
      $leftRollover.appendTo(this).fadeIn(200);
    },
    function() {
      $leftRollover.fadeOut(200);
    });
    $box.eq(2)
      .css('left', spacing * 2)
      .click(function(event) {
      $box.eq(0)
        .animate({
        'left': -spacing
      },
      'fast', function() {
        $(this).appendTo('#container .box');
        setUpbox();
      });
      $box.eq(1).animate({
        'left': 0
      },
      'fast');
      $box.eq(2).animate({
        'left': spacing
      },
      'fast');
      $box.eq(3)
        .css('left', spacing * 3)
        .animate({
        'left': spacing * 2
      },
      'fast');
      event.preventDefault();
    }).hover(function() {
      $rightRollover.appendTo(this).fadeIn(200);
    },
    function() {
      $rightRollover.fadeOut(200);
    });
    $box.eq(1).css('left', spacing);
  };
  setUpbox();
  $("a").attr("target", "_blank");
});

<div id="container">
  <div class="box">
    <a href="https://i.loli.net/2020/05/29/nmsKM9p71yw2u5X.jpg">
      <img height=60 src="https://i.loli.net/2020/05/29/nmsKM9p71yw2u5X.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/29/5DJVComIczgdX6P.jpg">
      <img height=60 src="https://i.loli.net/2020/05/29/5DJVComIczgdX6P.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/29/SR1OAqdj7lHsIPG.jpg">
      <img height=60 src="https://i.loli.net/2020/05/29/SR1OAqdj7lHsIPG.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/29/LVhTYa43EIJ2NkX.jpg">
      <img height=60 src="https://i.loli.net/2020/05/29/LVhTYa43EIJ2NkX.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/29/pxHA1shgWicjNe8.jpg">
      <img height=60 src="https://i.loli.net/2020/05/29/pxHA1shgWicjNe8.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/29/bBZ17nftCpVScHd.jpg">
      <img height=60 src="https://i.loli.net/2020/05/29/bBZ17nftCpVScHd.jpg"
      width=80>
    </a>
  </div>
</div>

   a img {
          border: 0;
        }
        
        #container {
          position: relative;
          background: #E0F0FB;
          width: 240px;
          height: 70px;
          margin: 1px auto;
          padding: 0;
          border: 1px solid #A1D6FE;
          z-index: 2;
        }
        
        #container .box {
          position: relative;
          width: 480px;
          z-index: 3;
        }
        
        #container a {
          float: left;
          margin: 5px 0px 5px 5px;
          height: 58px;
        }
        
        #container .control {
          position: absolute;
          z-index: 3;
          left: 0;
          top: 0;
        }