[HTML]

        <section id="banner">
            <div class="container">
                <div class="banner">
                    <ul class="list">
                        <li class="imgs"><img src="./img/banner1.png" alt=""></li>
                        <li class="imgs"><img src="./img/banner2.png" alt=""></li>
                        <li class="imgs"><img src="./img/banner3.png" alt=""></li>
                    </ul>
                </div>
            </div>

    <script>
        $(".banner>.list>.imgs").hide()
        $(".banner>.list>.imgs:first-child").show()
        setInterval(function(){
            $(".banner>.list>.imgs:first-child").fadeOut(1500).next().fadeIn(500).end(1000).appendTo(".banner>.list");
        },3000);
    </script>

$(".banner>.list>.imgs:first-child").fadeOut(1500).next().fadeIn(500).end(1000).appendTo(".banner>.list");},3000)

• li 중에 첫 번째 값을 서서히 사라지게 하는 명령어 
• 다음에 있는 li를 선택하는데 1초 안에 선택하라는 명령
• 방금 정에 사라진 li를 선택하는데 1초 안에 선택하라는 명령
• . end()를 선택한 li값을. list 맨 위에 추가하라는 명령

   <script>
   const sL=$("#banner>ul");
    const sI=$("#banner>ul>li");
    setInterval(function () {
            sL.animate({ left: "-1200px" }, 600, function(){
                $("#banner>ul>li:first-child").appendTo(sL);
                sL.css("left", "0");
            })
        },3000);
   </script>

#contents .gallery>ul>li {
    float: left;
    margin: 10px;
    position: relative;
    overflow: hidden;
    
}

#contents .gallery>ul>li:last-child {
    margin-right: 0;
    
}

.gallery span{
    display: block;
    position: absolute;
    width: 100px; height: 100px;
    background-color: black;
    top: 0; opacity: 0.5;
    transition: all 1s;
}
.gallery li:hover span{
    transform:translate(100px);
}