body{

                margin: 0;

                padding: 0px;

            }

            #banner{

                margin:20px auto;

                width: 600px;

                position: relative;

                overflow: hidden;

                height: 300px;

            }

            #banner img{

                width: 600px;

            }

            #banner ul {

                display: flex;

                position: absolute;

            }

            #banner ul,

            #banner ul li{

                padding: 0;

                margin: 0;

                list-style:none;

            }

            #banner ul{

                 animation: switch 20s linear 1s infinite alternate;

            }

            #banner ul:hover{

                 animation-play-state: paused;

            }

            @keyframes switch{

                0%,13%{

                    left: 0;

                }

                27%,41%{

                    left: -600px;

                }

                55%,69%{

                    left: -1200px;

                }

                83%,100% {

                    left: -1800px;

                }

            }

<div id="banner">

                <ul>

                    <li>

                        <img src="img/1.jpeg" />

                    </li>

                    <li>

                        <img src="img/2.jpeg" />

                    </li>

                    <li>

                        <img src="img/3.jpeg" />

                    </li>

                    <li>

                        <img src="img/4.jpeg" />

                    </li>

                </ul>

            </div>