轮播图（纯原生js 简单好用）

好好学习 ，天天向上。Are you ready?

话不多说 代码奉上！

创建HTML文件 引用下方js 图片自行更改 简单好用
script部分

        var imgList,bnList,rollImg,imgCon,ul,prevLi;
          var direct;
          var imgArr=["img/a.jpeg","img/b.jpeg","img/c.jpeg","img/d.jpeg","img/e.jpeg"];
          var bnArr=["img/left.png","img/right.png"];
          var bool=false;
          var autoBool=false;
          var time=180;
          var position=0;
          const WIDTH=960;
          const HEIGHT=320;
  //初始化函数
          init();
          function init() {
              animation();
              Method.loadImg(imgArr,loadFinishHandler,"img");
          }
  //创建容器 按钮 小圆点
          function loadFinishHandler(list,type) {
              if(type==="img"){
                  imgList=list;
                  Method.loadImg(bnArr,loadFinishHandler,"bn")
              }else if (type==="bn"){
                  bnList=list;
                  createRoll();
                  createLi();
                  createBn();
              }
          }
  //创建轮播图容器
          function createRoll() {
              var rollStyle={
                  width:WIDTH+"px",
                  height:HEIGHT+"px",
                  position:"relative",
                  margin:"auto",
                  overflow:"hidden"
              };
              var imgConStyle={
                  height:HEIGHT+"px",
                  position:"absolute"
              };
              var ulStyle={
                  listStyle:"none",
                  position:"absolute",
                  bottom:"10px"
              };
              rollImg=Method.createElem("div",document.body,"",rollStyle);
              imgCon=Method.createElem("div",rollImg,"",imgConStyle);
              ul=Method.createElem("ul",rollImg,"",ulStyle);
              imgCon.appendChild(imgList[0]);
              imgList[0].style.width=WIDTH+"px";
              imgList[0].style.height=HEIGHT+"px";
              rollImg.addEventListener("mouseleave",mouseHandler);
              rollImg.addEventListener("mouseenter",mouseHandler);
          }
  //创建按钮
          function createBn() {
                 var leftBnStyle={
                     position:"absolute",
                     left:"10px",
                     top:(HEIGHT-bnList[0].height)/2+"px"
                 };
                 var rightBnStyle={
                     position:"absolute",
                     right:"10px",
                     top:(HEIGHT-bnList[1].height)/2+"px"
                 };
                 for (var i=0;i<bnList.length;i++) {
                     rollImg.appendChild(bnList[i]);
                     Method.setStyle(bnList[i], i === 0 ? leftBnStyle : rightBnStyle);
                     bnList[i].addEventListener("click", clickHandler);
                 }
             }
  //创建li小圆点
   
          function createLi() {
              var liStyle={
                  width:"15px",
                  height:"15px",
                  border:"1px solid #ff0000",
                  backgroundColor:"rgba(255,0,0,0)",
                  borderRadius:"8px",
                  float:"left",
                  marginLeft:"10px"
              };
              for (var i=0;i<imgList.length;i++){
                  Method.createElem("li",ul,"",liStyle);
              }
              ul.style.left=(WIDTH-ul.offsetWidth)/2+"px";
              ul.addEventListener("click",liClickHandler);
              changeLi();
          }
   
          function createNextImg() {
              imgList[position].style.width=WIDTH+"px";
              imgList[position].style.height=HEIGHT+"px";
              imgCon.style.width=WIDTH*2+"px";
              if(direct==="left"){
                  imgCon.appendChild(imgList[position]);
                  imgCon.style.left="0px";
              }else if(direct==="right"){
                  imgCon.insertBefore(imgList[position],imgCon.firstElementChild);
                  imgCon.style.left=-WIDTH+"px";
              }
              changeLi();
              bool=true;
          }
          /*
          *
          *  修改li样式
          *  1、如果上一个li存在时，设置上一个li的样式是背景透明
          *  2、设置prevli是当前定位的li
          *  3、设置这个li的样式，背景是红色半透
          *
          * */
          function changeLi() {
              if(prevLi){
                  prevLi.style.backgroundColor="rgba(255,0,0,0)";
              }
              prevLi=ul.children[position];
              prevLi.style.backgroundColor="rgba(255,0,0,0.6)";
          }
   
          /*
          *
          *  鼠标进入离开轮播图容器事件
          *  1、如果鼠标进入轮播图容器，设置autoBool是false，这样就不会自动轮播了,重置
          *    下一次自动轮播的间隔时间为180
          *   2、如果鼠标离开了轮播图容器，设置autoBool是true，这样就会自动轮播了
          *
          *
          * */
   
          function mouseHandler(e) {
              if(e.type==="mouseenter"){
                  autoBool=false;
                  time=180;
              }else if(e.type==="mouseleave"){
                  autoBool=true;
              }
          }
   
          /*
          *  当左右按钮被点击时
          *  如果bool是true，不让他继续执行，这是指当正在轮播时，我们不接受点击按钮的事件
          *  1、如果点击的是左边按钮时：
          *     1）、设置方向向右移动
          *     2）、设置让定位值-1
          *     3）、如果定位值小于0，让他为图片数组的长度-1
          * 2、如果点击的是右边按钮时：
          *     1）、设置方向向左移动
          *     2）、设置让定位值+1
          *     3）、如果定位值等于图片数组的长度，让他为0；
          *
          *   3、调用添加创建下一个图片的函数
          *
          * */
          function clickHandler(e) {
              if(bool) return;
              if(this===bnList[0]){
                  direct="right";
                  position--;
                  if(position<0) position=imgList.length-1;
              }else if(this===bnList[1]){
                  direct="left";
                  position++;
                  if(position===imgList.length) position=0;
              }
              createNextImg();
          }
   
          /*
          *  当小圆点li被点击时
          *
          * 如果bool是true，不让他继续执行，这是指当正在轮播时，我们不接受点击按钮的事件
          *  1、先将ul的所有子项转为数组
          *  2、根据当前点击的对象获取到当前点击时数组的第几个索引li
          *  3、如果当前点击的索引值是当前的定位值，跳出不执行后面的内容
          *  4、如果当前点击的索引值大于定位值，将方向设为向左移动
          * 5、如果当前点击的索引值小于定位值，将方向设为向右移动
          * 6、定位值设置为当前点击的索引值
          * 7、设置创建新的下一张图片函数
          *
          * */
   
          function liClickHandler(e) {
              if(bool) return;
              var list=Array.from(ul.children);
              var index=list.indexOf(e.target);
              if(index===position)return;
              if(index>position){
                  direct="left";
              }else{
                  direct="right";
              }
              position=index;
              createNextImg();
          }
          /*
          * 动画函数
          * 每帧调用一次
          * 每次调用执行播放图片和自动轮播两个函数内容
          *
          * */
          function animation() {
              requestAnimationFrame(animation);
              moveImg();
              autoPlay();
          }
          /*
          *  自动轮播
          *  1、如果autoBool是false，不进入
          *  2、每次进入time-1
          *  3、如果time是0了，这时候就可以进行一组图片的轮播了
          *  4、设置时间间隔回到180帧
          *  5、设置方向向左。
          *  6、设置定位值+1
          *  7、如果定位值等于数组长度时，设置定位值是0
          *  8、执行创建下一张图片的函数
          *
          * */
          function autoPlay() {
              if(!autoBool) return;
              time--;
              if(time===0){
                  time=180;
                  direct="left";
                  position++;
                  if(position===imgList.length) position=0;
                  createNextImg();
              }
          }
          /*
          *  移动图片动画函数
          *  1、如果bool是false时，不进入动画
          *  2、如果方向向左移动时：
          *    1）、设置当前图片容器的左边位置不断减小
          *    2）、如果当前图片的容器的左边位置小于等于一个图片的宽度时
          *    3）、设置bool是false，这样下一帧就不会在进入动画了，就会停止
          *    4）、设置方向是空字符
          *    5）、删除图片容器中的第一个元素
          *    6）、重修修改位置让当前图片可以显示在中间
          *3、如果方向向右移动时：
          *    1）、设置当前图片容器的左边位置不断增加
          *    2）、如果当前图片的容器的左边位置大于等于0时
          *    3）、设置bool是false，这样下一帧就不会在进入动画了，就会停止
          *    4）、设置方向是空字符
          *    5）、删除图片容器中的最后一个元素
          *
          *
          * */
          function moveImg() {
              if(!bool) return;
              if(direct==="left"){
                  imgCon.style.left=imgCon.offsetLeft-20+"px";
                  if(imgCon.offsetLeft<=-WIDTH){
                      bool=false;
                      direct="";
                      imgCon.firstElementChild.remove();
                      imgCon.style.left="0px";
                  }
              }else if(direct==="right"){
                  imgCon.style.left=imgCon.offsetLeft+20+"px";
                  if(imgCon.offsetLeft>=0){
                      bool=false;
                      direct="";
                      imgCon.lastElementChild.remove();
                  }
              }
          }
   
   
   
**外部封装js代码**

    var Method=(function () {
      return {

      
      // getObject:function (url) {
      //     if(!~url.indexOf("?")) return;//查找url中是否有？，如果没有直接跳出
      //     url=url.split("?")[1];//如果有？，我们取出？后面的内容重新赋给url
      //     var obj={};//新建一个对象
      //     var arr;//新建变量arr
      //     if(!~url.indexOf("&")){//查找url中是否有&如果没有&做下面的内容
      //         if(!~url.indexOf("=")) return;//在查找是否有=，如果没有=，就直接跳出
      //         arr=url.split("=");//如果查找到=号，我们用=号分成一个数组，两个元素
      //         obj[arr[0]]=isNaN(Number(arr[1])) ? arr[1] : Number(arr[1]);//用=前面的内容作为obj的属性，=后面的内容作为该属性的值
      //         return obj;//因为没有&，还有一个值，因此直接将对象返回
      //     }
      //     arr=url.split("&");//用&切割为数组，因为上面判断了，这里就有&符
      //     var arr1;//定义arr1变量
      //     var bool=false;//初始是false
      //     for(var i=0;i<arr.length;i++){//循环上面用&切割的数组
      //         if(!~arr[i].indexOf("=")) continue;//如果数组中那一个字符中没有=，就跳到下一个循环
      //         arr1=arr[i].split("=");//用=将这个字符切割两个元素的数组
      //         obj[arr1[0]]=isNaN(Number(arr1[1])) ? arr1[1] : Number(arr1[1]);//将这个字符的=前的值作为属性，=后作为这个属性的值
      //         bool=true;//如果给obj中写入一个属性和值，这时候，就让bool为true
      //     }
      //     //如果bool是true
      //     if(bool) return obj;//最后返回这个对象

      // },

      createElem:function (type,parent,content,style,eventType,eventCallBack) {
          var elem=document.createElement(type);
          if(parent){
              parent.appendChild(elem);
          }
          if(type==="input"){
              elem.value=content;
          }else if(type==="img"){
              elem.src=content;
          }else{
              if(content){
                  var text=document.createTextNode(content);
                  elem.appendChild(text);
              }
          }
          if(style){
              Method.setStyle(elem,style);
          }
          if(eventType && eventCallBack){
              elem.addEventListener(eventType,eventCallBack);
          }
          return elem;
      },

      setStyle:function (elem,style) {
          for(var str in style){
              elem.style[str]=style[str];
          }
      },

      // randomColor:function (alpha) {
      //     var color="rgba(";
      //     for(var i=0;i<3;i++){
      //         color+=Math.floor(Math.random()*256)+",";
      //     }
      //     if(!isNaN(alpha) && (alpha || alpha===0)){
      //         if(alpha>1) alpha=1;
      //         return color+alpha+")";
      //     }
      //     return color+Number(Math.random().toFixed(1))+")";
      // },
      // random:function (min,max) {
      //     return Math.floor(Math.random()*(max-min)+min);
      // }
      // getDistance:function (point1,point2) {
      //     return Math.sqrt(Math.pow(point2.x-point1.x,2)+Math.pow(point2.y-point1.y,2));
      // },
      // tweenTo:function (elem,begin,end,time,easing) {
      //     if(!begin){
      //         begin={left:elem.offsetLeft,top:elem.offsetTop};
      //     }
      //     begin.elem=elem;
      //     var tween=new TWEEN.Tween(begin);
      //     tween.onUpdate(Method.tweenUpdate);
      //     // tween.onComplete(Method.tweenComplete);
      //     if(easing){
      //         tween.easing(easing);
      //     }
      //     if(!time) time=2000;
      //     end.elem=elem;
      //     tween.to(end,time);
      //     tween.start();
      //     return tween;
      // },
      // tweenUpdate:function () {
      //     for(var str in this){
      //         if(str==="elem"){
      //             continue;
      //         }
      //         this.elem.style[str]=this[str]+"px";
      //     }
      // },

      loadImg:function (arr,callBack,type) {
          var img=new Image();
          img.arr=arr;
          img.list=[];
          img.num=0;
          img.type=type;
          img.callBack=callBack;
          img.addEventListener("load",Method.loadHandler);
          img.src=arr[img.num];
      },
      LOAD_IMAGE_FINISH:"load_image_finish",
      loadHandler:function (e) {
      //    this--->img
          this.list.push(this.cloneNode(false));
          this.num++;
          if(this.num===this.arr.length){
              if(this.callBack){
                  this.callBack(this.list,this.type);
                  return;
              }
              var evt=new Event(Method.LOAD_IMAGE_FINISH);
              evt.list=this.list;
              evt.types=this.type;
              document.dispatchEvent(evt);
              return;
          }
          this.src=this.arr[this.num];
      }
  }
  })();