js轮播图有，移入移出事件，左右滑动事件功能

效果图：

具体代码：

    * {
        margin: 0;
        padding: 0;
    }

    .banner {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }

    .tow {
        width: 600%;
        height: 500px;
        margin-left:0%;
        display: flex;
        display: relative;
        /* transition: 1s all ; */
    }

    .tow img {
        width: 100%;
        height: 100%;
    }

    .five {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        bottom: 0;
        border: 1px solid lightgray;

    }

    .five span {
        width: 15px;
        height: 15px;
        display: block;
        background-color: antiquewhite;
        border-radius: 50%;
        display: flex;



    }

    .but {
        width: 100%;
        height: 30px;
        position: absolute;
        border-radius: 50%;
        top: 37%;

        display: flex;
        justify-content: space-between;

    }

    .but span {
        display: none;
        background-color: aqua;
    }

    .banner:hover .but span {
        display: block;
    }



    
        
        
        
        
		
		
    
    
    
        <
        >
    

具体的轮播可以根据需求进行调整；希望可以帮到大家；