原生轮播图

css

    * {
            padding: 0;
            margin: 0;
        }

        .you {
            position: relative;
            width: 1920px;
            height: 400px;
        }

        .you ul {
            position: absolute;
            width: 11520;
            overflow: hidden;
        }

        .you ul li {
            list-style: none;
            float: left;
        }

        img {
            width: 1920px;
            visibility: middle;
        }

html

    <div class="you">
        <!--> 先画出静态样式，让 ul 中的 li 浮动，给ul外的父盒子给宽度,再把li注释掉，后面动态添加-->
        <ul class="ou">
            <!-- <li>
                <img src="./img/banner-2.jpg" alt="">
            </li>
            <li>
                <img src="./img/banner-3.jpg" alt="">
            </li>
            <li>
                <img src="./img/banner-4.jpg" alt="">
            </li>
            <li>
                <img src="./img/banner-5.jpg" alt="">
            </li>
            <li>
                <img src="./img/banner-6.jpg" alt="">
            </li> -->
        </ul>
    </div>

//**<script src="./utils.js"></script>
    // <script>
    
        let youWrap = document.getElementsByClassName('you')[0]
        var oul = document.getElementsByClassName('ou')[0]

        U.ajax('GET', './banner.json', 'name=李四', function (res) {
            
            // 取出you图
            let you = JSON.parse(res).you
            // 给ul设宽
            let youwidth = parseInt(U.getStyle(youWrap, 'width'))
            // console.log(youwidth)
             // oul的宽度多加一项
            let oulWidth = youwidth * (you.length + 1)

            oul.style.width = oulWidth + 'px'

            let str = ''
            for (let i = 0; i < you.length; i++) {
                str += `<li><img src="${you[i]}" alt=""></li>`
            }

            oul.innerHTML = str

            let oli = document.getElementsByTagName('li')[0]

            let firstLi = oli.cloneNode(true)
             // 将第一项克隆追加到oul最后面
            oul.appendChild(firstLi)
             // 获取一个li的宽度
            let oliWidth = parseInt(U.getStyle(oli, 'width'))

            let n = 0

            setInterval(function () {
                n++
                if (n >= you.length) {
                    n = 0
                }
                U.buffermove(oul, { 'left': -n * oliWidth })
            }, 2000)
        })

utils.js

let U = (function (window, document) {
  /*  getStyle获取非行间样式
   * param  obj  元素  (object)
   * param  attr 属性  (string)
   */
  function getStyle(obj, attr) {
    if (window.getComputedStyle) {
      //如果window存在getComputedStyle 就为真
      return getComputedStyle(obj)[attr]
    } else {
      //IE
      return obj.currentStyle[attr]
    }
  }


  /* 
   *buffermove(obj,json,callback) 多属性同时运动
   * params obj {object} 元素  必须是绝对定位的
   * params json {'width':500}}  
   * params  callback {Function}} 可选 
   */

  function buffermove(obj, json) { //(obj,target,attr)  callback 形参
    // 频繁触发定时器时也要进行清除定时器
    // console.log('obj,json', obj, json, ' obj.timer', obj.timer);
    // 注意自定义属性
    // 直接定义的自定义属性 不论元素还是函数，都是undefined
    // 为什么要加入一个自定义属性？
    // 封装之后，如果外部调用此函数，还必须定义一个为null的timer，加入自定义属性后，外部不再需要传入timer
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {

      for (let key in json) {
        // 转为number
        let current = parseInt(getStyle(obj, key))
        let speed = (json[key] - current) / 10
 
        speed > 0 ? Math.ceil(speed) : Math.floor(speed)
     
        if (current === json[key]) {
          clearInterval(obj.timer)
        }
        obj.style[key] = current + speed + 'px'
      }
    }, 30)
  }


  function ajax(method, url, data, success) {
    // 1、创建ajax 对象
    var xhr = new XMLHttpRequest()
    if (method.toLocaleLowerCase() == 'get') {
      if (data) { //如果data有参数
        // 2、建立连接
        xhr.open(method, url + '?' + data, true)
      } else {
        xhr.open(method, url, true)
      }
      xhr.send()
    } else { //post
      xhr.open(method, url, true)
      // 设置请求头
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
      if (data) {//如果data有参数
        xhr.send(data)
      } else {
        xhr.send()
      }
    }

    // 4、注册监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {//服务器响应完毕 并且 数据请求成功
        // 调用回调函数
        success(xhr.responseText)
      }
    }
  }

  // 对象属性名和属性值相同的情况下可以省略属性名
  return {
    getStyle,
    buffermove,
    ajax
  }
})(window, document)

banner.json

{
  "you":[
    "./img/banner-2.jpg",
    "./img/banner-3.jpg",
    "./img/banner-4.jpg",
    "./img/banner-5.jpg",
    "./img/banner-6.jpg"
  ]
}