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/vhUxOmR43B2beVz.gif'); //创建向左移动的控制图片
            var $rightRollover = createControl('https://i.loli.net/2020/05/29/gPlAzMZXVnfNTeR.gif'); //创建向左移动的控制图片

            $('#container').css({ //改变图像传送带容器的CSS样式
                'width': spacing * 3,
                'height': '70px',
                'overflow': 'hidden' //溢出时隐藏
            }).find('.box a').css({
                'float': 'none',
                'position': 'absolute', //设置为绝对布局
                'left': 1000 //将左边距设置为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="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;
            /*设置顶边距*/
        }