js轮播图

什么是轮播图呢？能够实现多张图片循环出现效果的我们称之为轮播图。

html样式

  

    

        

        

        

        

        

        

    
    

        
1
//小圆圈
        
2
        
3
        
4
        
5
        
6
    
    <//左边按钮
    >//右边按钮

css样式

     * {
margin: 0;
padding: 0;
list-style: none;
}

   .box {
 width: 800px;
height: 380px;
margin: 0 auto;
overflow: hidden;
position: relative;
}

.box ul li {
width: 800px;
height: 380px;
 }

 .box ul li img {
width: 800px;
height: 380px;
 }

 .leftbtn {
width: 80px;
height: 150px;
background-color: rgba(0, 0, 4, 0.6);
color: #fff;
font-size: 100px;
line-height: 150px;
text-align: center;
position: absolute;
border: none;
top: 50%;
outline: none;
margin-top: -75px;
  }


.rightbtn {

width: 80px;
height: 150px;
background-color: rgba(0, 0, 4, 0.6);
color: #fff;
font-size: 100px;
line-height: 150px;
text-align: center;
position: absolute;
border: none;
top: 50%;
margin-top: -75px;
outline: none;
right: 0;
 }

.box ol {
position: absolute;
bottom: 30px;
left: 100px;
}

  .box ol li {
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
margin: 0px 20px;
float: left;
text-align: center;
line-height: 50px;
 }

 .box ol .active {
 background-color: green;
 }

js样式

屏幕快照 2019-10-18 下午8.57.09.png

这就是我敲出的轮播图，如果大家感兴趣的话可以试一下喔，js小白，如有错误，望多指教，谢谢! ! !