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(''); //创建向左移动的控制图片
            var $rightRollover = createControl('('); //创建向左移动的控制图片

            $('#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'); //为第一张图片添加动画

<div id="container">
        <div class="box">
           <a href="https://sm.ms/image/p2WODFfUkTRjcAx" ><img src="https://i.loli.net/2020/05/31/p2WODFfUkTRjcAx.gif" ></a>
          <a href="https://sm.ms/image/p2WODFfUkTRjcAx" ><img src="https://i.loli.net/2020/05/31/p2WODFfUkTRjcAx.gif" ></a>
    <a href="https://sm.ms/image/p2WODFfUkTRjcAx" ><img src="https://i.loli.net/2020/05/31/p2WODFfUkTRjcAx.gif" ></a>
           <a href="https://sm.ms/image/p2WODFfUkTRjcAx" ><img src="https://i.loli.net/2020/05/31/p2WODFfUkTRjcAx.gif" ></a>
            <a href="https://sm.ms/image/p2WODFfUkTRjcAx" ><img src="https://i.loli.net/2020/05/31/p2WODFfUkTRjcAx.gif" ></a>
           <a href="https://sm.ms/image/p2WODFfUkTRjcAx" target="_blank"><img src="https://i.loli.net/2020/05/31/p2WODFfUkTRjcAx.gif" ></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;
            /*设置顶边距*/
        }