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/30/ZpyewqrDjTWUhfl.gif'); 
            var $rightRollover = createControl('https://i.loli.net/2020/05/30/UZ7brMLyR62lqBH.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); 
                        $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="images/01.jpg"><img height=60 src="https://i.loli.net/2020/05/29/IUEhx1wuOBy28YG.jpg" width=80></a>
            <a href="images/02.jpg"><img height=60 src="https://i.loli.net/2020/05/29/zMenRfUZGcQSb25.jpg" width=80></a>
            <a href="images/03.jpg"><img height=60 src="https://i.loli.net/2020/05/29/9iyvKCF8f1bcRd5.jpg" width=80></a>
            <a href="images/04.jpg"><img height=60 src="https://i.loli.net/2020/05/29/Bbk29K5JLexDyXi.jpg" width=80></a>
            <a href="images/05.jpg"><img height=60 src="https://i.loli.net/2020/05/29/YsA7hqdboSGJrOU.jpg" width=80></a>
            <a href="images/06.jpg"><img height=60 src="https://i.loli.net/2020/05/29/LyDPtTbHXquaNI5.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;
        }