js简单轮播图

今天给大家带来一个原生的轮播图，如果有什么地方错误，请指出。

这是HTML部分的代码

    
    
    
    
    



    

        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
        
左
        
右
    

我们来给它加个样式

.index-container {
    width: 500px;
    height: 300px;
    overflow: hidden;
    position: relative;
    ul {
        position: absolute;
        width: 3500px;
        list-style: none;
        height: 300px;
        padding: 0;
        margin: 0;
        left: 0;
        li {
            float: left;
            width: 500px;
            height: 300px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    p {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 50%;
        margin-top: -10px;
        background-color: rgba(0, 0, 0, .5);
    }
    .left {
        left: 20px;
    }
    .right {
        right: 20px;
    }
}

这是js部分

这样一来就有了一个简易版的轮播图了

GIF.gif