前端实战小案例--升级版自适应宽度无缝轮播图

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

该轮播图可以自适应设备的宽度变化，（由于图片大小有限制，故没演示其他效果：无缝轮播、小圆点控制轮播、鼠标放在图片上停止轮播，移出则开始轮播等）效果如下：

代码如下：

1. index.html

   
   
   
       
       
       
       
       
   
   
       
   
           
   
               
   
                   
   
                   
   首页
                   
   分销系统
                   
   消费全返
                   
   系统O2O
                   
   系统渠道商
                   
   价格与服务
                   
   售后服务
                   
   关于我们
                   
   
                       
                   
               
           
       
       
   
           
   
               
               
               
               
           
           
   
               
   
               
   
               
   
           
       
       
   
   
       
       
   
   
       
   
   
   

    

2. index.js

   // 轮播图js代码
   window.onload = function () {
       var slide = document.getElementsByClassName('slide')[0];
       var imgs = document.getElementsByClassName('slide')[0].getElementsByTagName('img');
       var slick_dots = document.getElementsByClassName('slick-dots')[0].getElementsByTagName('label');
       // 切换图片的速度
       var margin_left = 0;
       //定义定时器timer
       var timer;
       //屏幕的宽度,根据屏幕的宽度自适应图片的宽度，（即自适应轮播图）
       var winWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
       run();
       // 绑定轮播图图片鼠标移入移出事件
       for(let i=0;i

    

3. index.css

   /*header：导航栏开始*/
   #header{
       width: 100%;
       height: 88px;
       display: flex;
       justify-content: center;
   }
   .top-menu{
       width: 1200px;
       height: 88px;
   }
   .top-menu ul{
       display: flex;
       justify-content: space-around;
       align-items: center;
       margin-top: 19px;
       font-size: 14px;
       color: #333;
   }
   .top-menu .btn input{
       outline: none;
       height: 30px;
       border: 1px solid #4381ff;
       border-radius: 4px;
       cursor: pointer;
   }
   .top-menu .btn input:nth-child(1){
       width: 62px;
       color: #4381ff;
       background-color: #FFFFFF;
       margin-left: 25px;
       margin-right: 10px;
       cursor: pointer;
   }
   .top-menu .btn input:nth-child(2){
       width: 80px;
       color: #FFFFFF;
       background-color: #4381ff;
   }
   /*header：导航栏结束*/
   
   /*banner：轮播图开始*/
   #banner{
       height: 490px;
       width: 100%;
       position: relative;
       overflow: hidden;
   }
   #banner .slide{
       height: 100%;
       width: 400%;
   }
   #banner .slide a{
       display: inline-block;
       height: 100%;
       width: 25%;
       float: left;
   }
   #banner .slide img{
       height: 100%;
       width: 100%;
   }
   .slick-dots{
       position: absolute;
       width: 75px;
       display: flex;
       justify-content: space-around;
       align-items: center;
       left: 50%;
       bottom: 21px;
       transform: translateX(-50%);
   }
   .slick-dots li label{
       width: 10px;
       height: 10px;
       display: inline-block;
       background-color: #DAE6FF;
       border-radius: 5px;
   }
   
   /*banner：轮播图结束*/
   

    

4. base.css 

   /*可以共用的样式*/
   *{
       margin: 0;
       padding: 0;
       list-style: none;
       text-decoration: none;
   }