css与js实现轮播图效果

HTML代码：

"en">

    "UTF-8">
    
    
    "stylesheet" href="css/轮播样式.css">


    
"outer">
        
"img">
            
"">"img/1.jpg"> 
            
"">"img/2.jpg"> 
            
"">"img/3.jpg"> 
            
"">"img/4.jpg"> 
            
"">"img/5.jpg"> 
            
"">"img/6.jpg"> 
        
        
"num">
         
        
        
"left btn"> < 
        
"right btn"> > 
    

引入了一个js文件和一个css文件
css：

.outer{
    width: 790px;
    height: 340px;
    margin: 80px auto;
    position: relative;
}
 .img li{
     position: absolute;
     list-style: none;
     top: 0;
     left: 0;
 }
.num{
    position: absolute;
    bottom: 20px;
    left: 270px;
    list-style: none;
}
.num li{
    display: inline-block;  /*行内块元素*/
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    margin-left: 4px;
 }
 .btn{
     position: absolute;
     top: 50%;
     background-color: lightgray;
     width: 30px;
     height: 60px;
     color: white;
     text-align: center;
     line-height: 60px;
     font-size: 30px;
     opacity: 0.7;
     margin-top:-30px;
     display: none;
 }
.right{
    right: 0;
}
.outer:hover .btn{
    display: block;
}
/* 为第一个轮播图为红色点*/
.num .active{
    background-color: red;
}

还有一个jquery-3.1.1.js文件，经常会用到的，太多了所以放个链接

https://download.csdn.net/download/qq_44699174/12440245
我设置成零积分下载了，可还是需要消耗积分，也可以去网上搜一下这个文件。