原生js实现轮播图

轮播图实现

轮播图实现功能：

• 点击左箭头轮播到上一张图片
• 点击右箭头轮播到下一张图片
• 实现图片的自动轮播
• 当鼠标进入轮播图则停止自动轮播
• 当鼠标离开轮播则开启自动轮播
• 实现点击对应小圆点实现显示对应index图片

轮播图实现思路及过程代码：

1、首先搭建html，整个轮播图时content部分

轮播图中分为`图片`部分和`左右箭头`和`小圆点`三部分

html代码

<div class="content">
	//图片区域
     <div class="imgs">
          <ul>
              <li>
                  <img src="../js/img/轮播图1.jpg" alt="">
              </li>
              <li>
                  <img src="../js/img/轮播图2.jpg" alt="">
              </li>
              <li>
                  <img src="../js/img/轮播图3.jpg" alt="">
              </li>
              <li>
                  <img src="../js/img/轮播图4.jpg" alt="">
              </li>
          </ul>
      </div>
      //左右箭头
      <div class="arrow">
          <div class="left_arrow">&lt;</div>
          <div class="right_arrow">&gt;</div>
      </div>
      //小圆点
      <div class="cicle">
          <div class="current"></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
  </div>

2、设置css，样式看自己喜好

重点：
我们是通过设置ul的left值来进行图片的移动
那么我们就要设置ul是绝对定位
让ul的长度 = 每张图片的宽度 * 图片的个数
然后给外面的imgs宽高设置图片的宽高大小，然后overflow：hidden溢出隐藏

css代码

	<style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .content {
            width: 650px;
            height: 200px;
            position: relative;
        }
        .imgs {
            position: relative;
            width: 650px;
            height: 200px;
            overflow: hidden;
        }
        .imgs ul {
            position: absolute;
            left: 0;
        }
        .imgs ul li {
            float: left;
        }
        .imgs ul li img {
            width: 650px;
            height: 200px;
        }
        .left_arrow,
        .right_arrow {
            width: 40px;
            height: 40px;
            border-radius: 25px;
            background-color: rgba(225, 225, 225, .2);
            position: absolute;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .left_arrow:hover,
        .right_arrow:hover {
            background-color: rgba(225, 225, 225, .8);
            color: #333;
        }
        .left_arrow {
            color: rgba(227, 245, 126, 0.651);
            font-size: 25px;
            left: 5px;
            top: 82px;
        }
        .right_arrow {
            color:rgba(227, 245, 126, 0.651);
            font-size: 28px;
            right: 5px;
            top: 82px;
        }
        .cicle {
            position: absolute;
            bottom: 10px;
            right: 10px;
            overflow: hidden;
        }
        .cicle div {
            float: left;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            cursor: pointer;
            background-color: royalblue;
            border-radius: 50%;
        }
        .current {
            background-color: salmon !important;
        }
    </style>

3、js部分

首先进行元素获取并且进行初始化赋值

	   var content = document.querySelector('.content')
       var imgs = document.querySelector('.imgs')
       var ul = document.querySelector('ul')
       var lis = document.querySelectorAll('li')
       var left_arrow = document.querySelector('.left_arrow')
       var right_arrow = document.querySelector('.right_arrow')
       var cicle = document.querySelector('.cicle')
       var cicles = cicle.querySelectorAll('div')
       //lis的长度 - 1就是要进行移动的次数
       var len = lis.length - 1
       //最后一张图片的判断的ul的left值
       var maxwidth = -len * 650
       //设置ul的width为所有图片的宽度
       ul.style.width = -maxwidth
       //ul的left初始值为0 显示第一张图片
       ul.style.left = 0

实现两个函数来进行前一张图片的轮播和后一张图片的轮播
要注意：

left正值是向右移动，向左移动是负值，ul和imgs是相对移动，所以是反的

		//下一个图片的轮播
        function next () {
        	//定义一个最后要赋给ul.left的值的变量
            var next
            //如果当前的图片是最后一张时，下一张图片应该是第一张图片
            if (ul.style.left == maxwidth + 'px') {
                next = 0
            }else {
            	//要把原本left的字符串类型的值进行转换为数值类型并进行运算
                next = parseInt(ul.style.left) - 650
            }
            //赋值
            ul.style.left = next + 'px';
            //实现小圆点的样式改变
            current(parseInt(-next / 650))
        }
        //上一个图片的轮播
        function prev () {
            var prev
            //如果当前图片为第一张图片时，上一张图片应该为最后一张
            if (ul.style.left == 0 + 'px'){
                prev = maxwidth;
            }else{
                prev = parseInt(ul.style.left) + 650
            }
            ul.style.left = prev + 'px'
            current(parseInt(-prev / 650))
        }

实现左右按钮实现图片轮播

		//左按钮
		left_arrow.addEventListener('click', () => {
            prev()
        })
        //右按钮
        right_arrow.addEventListener('click', () => {
            next()
        })

实现自动轮播以及鼠标进入和离开的限制

		var timer = null
		//实现一个自动轮播的函数
        function autoPlay () {
            timer = setInterval(function () {
                next();
            },1000);
        }
        autoPlay();

        //进入时停止轮播
        content.onmouseenter = function () {
            clearInterval(timer);
        }
        //离开时启动轮播
        content.onmouseleave = function () {
            autoPlay();    

实现小圆点

1、首先进行计算当前点击的小圆点的index
	通过对 e.clientX 进行运算，减去当前 cicle 距离父元素距离左侧的位置
		就是当前点击的这个点相对于cicle盒子的 x 的值
	然后 / 20（每一个小圆点以及它的外边距的大小总和）并向下取余
2、通过 left 修改当前轮播的图片（通过设置 i ）
3、通过排他的思想进行设置点击的小圆点的样式 （准备好的 current ）
	先遍历所有的小圆点，去除 current 样式（就是 className 置空）
	然后再给当前的小圆点添加 current 的 class即可

		//给cicle盒子设置点击事件（事件代理）
	  cicle.addEventListener('click',(e) => {
            var i = Math.floor((e.clientX - 560) / 20);
            ul.style.left = (-i * 650) + 'px'
            current(i)
        })

		//写一个函数来进行小圆点的样式设置 
       function current(i) {
           for(let i = 0; i < cicles.length; i++) {
               cicles[i].className = ''
           }
           cicles[i].className = 'current'
       }