JS轮播图

创作不易小li哭泣请大家留个赞评个论再偷走我呕心沥血的代码吧~~~

首先给大家放一张我的效果图直接让你们眼前一亮哈哈哈哈···

 接下来就是我封装的让图片动起来的js运动框架：

// var timerId = null;
// 封装动画的函数
function animate(element, target) {
  // 通过判断，保证页面上只有一个定时器在执行动画
  if (element.timerId) {
    clearInterval(element.timerId);
    element.timerId = null;
  }

  element.timerId = setInterval(function () {
    // 步进  每次移动的距离
    var step = 10;
    // 盒子当前的位置
    var current = element.offsetLeft;
    // 当从400 到 800  执行动画
    // 当从800 到 400  不执行动画

    // 判断如果当前位置 > 目标位置 此时的step  要小于0
    if (current > target) {
      step = -Math.abs(step);
    }

    // Math.abs(current - target)   <= Math.abs(step)
    if (Math.abs(current - target) <= Math.abs(step)) {
      // 让定时器停止
      clearInterval(element.timerId);
      // 让盒子到target的位置
      element.style.left = target + 'px';
      return;
    }
    // 移动盒子
    current += step;
    element.style.left = current + 'px';
  }, 5);
}

 再就是主要的div布局：

这里图片自己随便换昂，找我要可以私信。

    <div class="all" id='box'>
        <div class="screen">
            <!-- 无序列表 -->
            <ul>
                <li><img src="images/iu6.jpg" width="500" height="300" /></li>
                <li><img src="images/iu7.jpeg" width="500" height="300" /></li>
                <li><img src="images/iu8.jpeg" width="500" height="300" /></li>
                <li><img src="images/iu9.jpeg" width="500" height="300" /></li>
                <li><img src="images/iu10.jpeg" width="500" height="300" /></li>
            </ul>
            <!-- 有序列表 -->
            <ol>

            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

 style样式：

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 300px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 300px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }

        #arr {
            display: none;
            z-index: 1000;

        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>

最后是js部分：

直接在结尾body的前面就行了

    <!-- 引入封装的animate运动框架 -->
    <script src="./js/animate.js"></script>
    <script>
        //首先封装一个获取元素id的函数
        function my$(id) {
            return document.getElementById(id);
        }
        // 获取操作元素
        var box = my$('box')
        var screen = box.children[0]
        var ul = screen.children[0]
        var ol = screen.children[1]
        // 箭头元素
        var arr = my$('arr')
        var left = my$('left')
        var right = my$('right')
        // 1.动态生成轮播图序号
        // 拿到页面上有多少张图片
        var count = ul.children.length
        for (var i = 0; i < count; i++) {
            var li = document.createElement('li')
            li.innerText = i + 1
            ol.appendChild(li)
            li.onclick = liClick
            //给li设置一个属性index，值为循环中的i
            li.setAttribute('index', i)
        }
        // 2.点击序号动态的切换图片
        //让序号1高亮
        ol.children[0].className = 'current'
        function liClick() {
            //2.1取消其他li的高亮，让当前li高亮
            for (var i = 0; i < ol.children.length; i++) {
                var li = ol.children[i]
                li.className = ""
            }
            //让当前li高亮
            this.className = "current"
            //2.2点击序号，以动画的方法切换到当前图片的位置
            //拿到图片宽度
            var imgWidth = screen.offsetWidth
            // console.log('imgWidth', imgWidth);
            //获取自定义属性
            var liindex = this.getAttribute('index')
            // console.log('liindex', liindex);
            // console.log(-liindex * imgWidth);
            //使用封装的animate运动框架实现图片轮播
            animate(ul, -liindex * imgWidth)
        }


        // 3.鼠标放到盒子上动态显示箭头
        box.onmouseenter = function () {
            arr.style.display = 'block'
        }
        box.onmouseleave = function () {
            arr.style.display = 'none'
        }
        // 4.实现上一张下一张图片的切换
        var index = 0
        //上一张图片切换
        left.onclick = function () {
            if (index > 0) {
                index--
                ol.children[index].click()
            }
        }
        //下一张图片切换
        right.onclick = function () {
            //如果是最后一张图片，不让index++
            if (index < count - 1) {
                index++
                ol.children[index].click()
            }

        }
    </script>

最后我们的轮播图就这么完美的结束了昂。