js实现轮播图（简单滚动轮播)-向日葵屋

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

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

原理：

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

需要实现一下效果：

1.自动播放

2.左右按钮切换

3.下标圆点切换

在这里插入图片描述

代码：

<!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>