SOURCE

$(document).ready(function() {
  var spacing = 90; 
  function createControl(src) { //23333
    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/31/T5W7AfBKwyOq2Ev.gif'); 
  var $rightRollover = createControl('https://i.loli.net/2020/05/31/9wKWdFGUYzpru5x.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/31/XJNFcYaKQB5VWsi.jpg">
      <img height=60 src="https://i.loli.net/2020/05/31/XJNFcYaKQB5VWsi.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/31/XKrwRTWFm8buBYN.jpg">
      <img height=60 src="https://i.loli.net/2020/05/31/XKrwRTWFm8buBYN.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/31/PvsTrIxa6DJAuWV.jpg">
      <img height=60 src="https://i.loli.net/2020/05/31/PvsTrIxa6DJAuWV.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/31/VchaeFfpnE1AbSi.jpg">
      <img height=60 src="https://i.loli.net/2020/05/31/VchaeFfpnE1AbSi.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/31/hJTM7cP6WskCF4U.jpg">
      <img height=60 src="https://i.loli.net/2020/05/31/hJTM7cP6WskCF4U.jpg"
      width=80>
    </a>
    <a href="https://i.loli.net/2020/05/31/fKGyF7zptebIXQg.jpg">
      <img height=60 src="https://i.loli.net/2020/05/31/fKGyF7zptebIXQg.jpg"
      width=80>
    </a>
  </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;
        }