js实现轮播图（简单滚动轮播)

冷不防 2021-11-10 09:30 706阅读 0赞

## 原理： ##

### 在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时 ，b需要移动 ，移动一个a的宽度，使下一张图片显示， ###

### 需要实现一下效果： ###

#### 1.自动播放 ####

#### 2.左右按钮切换 ####

#### 3.下标圆点切换 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]

## 代码： ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
     <style>
         *{
             margin: 0;
             padding: 0;
             list-style: none;
         }
         .box{
             width: 1000px;
             height: 400px;
             border: 1px solid red;
             position: relative;
             margin: 0 auto;
             overflow: hidden;
         }
         .box .list{
             width: 5000px;
             height: 100%;
             border: 1px solid yellow;
             position: relative;
             transition: left 1.5s linear; /*过度时间，即变化时间为1.5s*/
         }
         .box .list li{
             width: 1000px;
             height: 400px;
             float: left;
         }
         .box .list li img{
            width: 1000px;
             height: 400px;
             float: left;
         }
         .box .btn{
             width: 50px;
             height: 100px;
             position: absolute;
             top: 150px;
         }
         .box .left{
             left: 0;
         }
         .box .right{
             right: 0;
         }
         .box .page{
             width: 100%;
             height: 30px;
             position: relative;
             bottom: 30px;
             left: 0;
             text-align: center;
         }
         .box .page li{
             width: 15px;
             height: 15px;
             border-radius: 50%;
             background: #000;
             display: inline-block;
             margin: 0 20px;
             
         }
        .box .page .on{
             background: #fff;
         }
    
     </style>
    <body>
        
        <div class="box">
            
            <ul class="list">
                <li><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=486958716,243120904&fm=26&gp=0.jpg" alt=""></li>
                <li><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3241799622,2404142078&fm=26&gp=0.jpg" alt=""></li>
                <li><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3249712317,2640666993&fm=26&gp=0.jpg" alt=""></li>
            </ul>
            
            <input type="button" value="<" class="btn left">
            <input type="button" value=">" class="btn right">
            
            <ol class="page"> 
                <li class=" on "></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    
    
        <script type="text/javascript">
                var box = document.querySelector('.box');//获取可视区域的盒子
                var list = document.querySelector('.list');//获取放图片的盒子，这个盒子是要移动的 
                var len = document.querySelectorAll('.list li').length;//获取滑块的个数  即几张图片
                var liwidth = document.querySelector('.list li').offsetWidth;//获取放每一个图片的li的宽度
                var pag = document.querySelector('.page');//获取下面圆圈容器
                var pageli = document.querySelectorAll('.page li');//获取圆圈个数
                var leftbtn = document.querySelector('.left');//获取左按钮
                var rightbtn = document.querySelector('.right');//获取右按钮
                var count = 0;//规定当前的位置 （当前显示图片的序号，0，1，2）
    
                // 右按钮的点击事件---点击一下 图片向左移动一张
                rightbtn.onclick=function(){
                    count++;
                    if(count>=len){      
                        count = 0;
                    }
                    /*
                        当移动到第一张图片时   ul向左移动0px  即   0 * 1000px（可视区域的宽度）
                        当移动到第二张图片时   ul向左移动1000px  即   1 * 1000px （count  *  liwidth ）
                        当移动到第三张图片时   ul向左移动2000px  即   2 * 1000px （count  *  liwidth ）
                    */
                    
                    list.style.left=-liwidth*count+'px';
    
                    //下面圆圈跟着图片的改变 而改变----从黑圈变成白圈
                    for(var i=0;i<pageli.length;i++){
                        pageli[i].className=''; //清除所有的类样式
                    }
                    pageli[count].className='on'; //加上名为on 的类样式
                    
                }
                // 左边按钮的点击事件
               leftbtn.onclick=function(){
                   count--;
                   if(count<=-1){
                    count=len-1;
                   }
                   list.style.left=-liwidth*count+'px';
                   for(var i=0;i<pageli.length;i++){
                        pageli[i].className='';
                    }
                    pageli[count].className='on';
                    
               }
    
               for(var i=0;i<pageli.length;i++){
                    pageli[i].setAttribute('date-index',i);//自定义属性并赋予page中的每一个li
                    // 每个小圆点的点击事件
                    pageli[i].onclick=function(){
                        // 将点击的小圆点的自定义属性赋予count
                        count = this.getAttribute('date-index');
                        list.style.left=-liwidth*count+'px';
                        for(var i=0;i<pageli.length;i++){
                            pageli[i].className='';
                        }
                            pageli[count].className='on';
                    }
                   
                   
               }
               //添加定时器---实现自动轮播
               var timer = setInterval(function(){
                rightbtn.onclick();
               },3000) 
    
            //    鼠标移出时  添加定时器（启动）
               box.onmouseleave = function(){
                timer = setInterval(function(){
                rightbtn.onclick();
               },3000) 
               }
            //    鼠标移入时  停止定时器（清除）
               box.onmouseenter = function(){
                clearInterval(timer);
               }
            </script>
    </body>
    
    
    </html>

## 效果： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]: /images/20211109/8c73f1daaa6249fb9ffb33e918e1a673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70 1]: /images/20211109/dc633f7a7df54cb280db78b7650a7ba9.png