SOURCE

 <div id="container">
        <div class="box">
            <a href="https://i.loli.net/2020/05/30/Vutk2dJb9pEcT6m.jpg"><img height=60 src="https://i.loli.net/2020/05/30/Vutk2dJb9pEcT6m.jpg" width=80></a>
            <a href="https://i.loli.net/2020/05/30/eKS6VLJcRMfjEOv.jpg"><img height=60 src="https://i.loli.net/2020/05/30/eKS6VLJcRMfjEOv.jpg" width=80></a>
            <a href="https://i.loli.net/2020/05/30/CGZKsFxI3UE4oJc.jpg"><img height=60 src="https://i.loli.net/2020/05/30/CGZKsFxI3UE4oJc.jpg" width=80></a>
            <a href="https://i.loli.net/2020/05/30/zbr6egmRXQVTtNO.jpg"><img height=60 src="https://i.loli.net/2020/05/30/zbr6egmRXQVTtNO.jpg" width=80></a>
            <a href="https://i.loli.net/2020/05/30/Y2its4GhmULvAca.jpg"><img height=60 src="https://i.loli.net/2020/05/30/Y2its4GhmULvAca.jpg" width=80></a>
            <a href="https://i.loli.net/2020/05/30/mKrpF9PtEqCxzAU.jpg"><img height=60 src="https://i.loli.net/2020/05/30/mKrpF9PtEqCxzAU.jpg" width=80></a>
        </div>
    </div>
 <script type="text/javascript">
        $(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);
                    }, 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");
        });
    </script>

 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;
        }