游民轮播图效果实现

 <section class="container" id="container">
        <i id="leftPo"></i>
        <div class="imgs" id="imgs">
        </div>
        <div id="line">
        </div>
        <div class="thumbnail" id="thumbnail">
            <img src="../img/1.jpeg" >
            <img src="../img/2.jpeg" >
            <img src="../img/3.jpeg" >
            <img src="../img/4.jpeg" >
            <img src="../img/5.jpeg" >
        </div>
        <i id="rightPo"></i>
    </section>

   <style>
        * 
            padding: 0;
            margin: 0;
        

        .container 
            width: 640px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            overflow: hidden;
            background-color: rgb(228, 228, 228);
        

        .imgs 
            width: 640px;
            height: 480px;
            border: 3px double gray;
            box-sizing: border-box;
            background-image: url(‘../img/1.jpeg‘);
            transition: all linear .5s;
        

        #leftPo 
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url(‘../img/left.png‘);
            position: absolute;
            top: 225px;
            left: 20px;
            z-index: 2;
            cursor: pointer;
            opacity: 0;
            transition: all linear .5s
        

        #rightPo 
            display: inline-block;
            width: 30px;
            height: 30px;
            background-image: url(‘../img/right_03.png‘);
            position: absolute;
            top: 225px;
            right: 20px;
            z-index: 2;
            cursor: pointer;
            opacity: 0;
            transition: all linear .2s
        

        #line 
            width: 640px;
            border-bottom: 6px solid red;
            position: absolute;
            left: -640px;
        

        .thumbnail 
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        

        .thumbnail>img 
            width: 120px;
            height: 100px;
            cursor: pointer;
        
    </style>

 　　　　　　 let line = document.getElementById(‘line‘);
            let imgArr = [‘../img/1.jpeg‘, ‘../img/2.jpeg‘, ‘../img/3.jpeg‘, ‘../img/4.jpeg‘, ‘../img/5.jpeg‘];
            let imgs = document.getElementById(‘imgs‘);
            let leftPo = document.getElementById(‘leftPo‘);
            let rightPo = document.getElementById(‘rightPo‘);
            let thumbnail = document.getElementById(‘thumbnail‘);
            let thumbnails = document.getElementsByTagName(‘IMG‘);
            // 第一张图片的缩略图初始化
            thumbnails[0].style.border = "4px solid gray";
            // stopTimerLine表示红线的定时器，stopTimerAll表示整体动画的定时器，index表示缩略图的索引。
            let stopTimerLine, stopTimerAll, index = 0;
            // 红线移动调用函数  同时在这个函数里要设置return lineMove，即返回本身函数，不然就只能执行一次
            let lineMove = function () 
                stopTimerLine = setInterval(function () 
                    if (line.offsetLeft < 0) 
                        line.style.left = line.offsetLeft + 2 + ‘px‘;
                     else 
                        clearInterval(stopTimerLine);
                    
                , 10);
                rightPo.onclick();
                return lineMove;
            
            // 改变图片，改变缩略图样式，同时红线恢复初始位置
            let changeStyle = function (index) 
                imgs.style.backgroundImage = `url(‘../img/$index.jpeg‘)`;
                for (let j = 0; j < thumbnails.length; j++) 
                    if (thumbnails[j].style.border != ‘‘) 
                        thumbnails[j].style.border = ‘‘;
                        break;
                    
                
                thumbnails[index - 1].style.border = "4px solid gray";
                line.style.left = -640 + ‘px‘;
            
            // 右箭头按钮点击更换图片
            rightPo.onclick = function () 
                if (index == 5) 
                    index = 1;
                 else 
                    index++;
                
                changeStyle(index);

            
            // 左箭头按钮点击更换图片
            leftPo.onclick = function () 
                if (index == 0 || index == 1) 
                    index = 5;
                 else 
                    index--;
                
                changeStyle(index);
            
            // 缩略图点击更换图片
            thumbnail.onclick = function (event) 
                for (let i = 0; i < thumbnails.length; i++) 
                    if (thumbnails[i] == event.target)
                        index = i + 1;
                
                changeStyle(index);
            
            // 鼠标移入图片框就显示左右箭头，移出时隐藏
            container.onmousemove = function () 
                leftPo.style.opacity = ‘0.8‘;
                rightPo.style.opacity = ‘0.8‘;
            
            container.onmouseout = function () 
                leftPo.style.opacity = ‘0‘;
                rightPo.style.opacity = ‘0‘;
            
            // 红线移动判断图片的改变   在此计时器中 用lineMove()先调用一次函数（同时在这个函数里要设置return lineMove，即返回本身函数，不然就只能执行一次），这样就刷新页面即执行一次
            let imgMove = function () 
                clearInterval(stopTimerAll);
                stopTimerAll = setInterval(lineMove(), 5000);
            
            imgMove();