在页面布局中通常会用到轮播图，特别是在一些大型的网页中都可以看到轮播图，有时候为了方便快速我们可能会用到一些插件直接使用轮播图，还有就是自己把轮播图写出来，轮播图的样式有很多，接下来我们将了解常用的一种轮播图的写法

页面样式

<style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

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

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

        .screen li {
            width: 500px;
            height: 200px;
            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>

页面布局

使用ul li标签装图片，使用overflow:hidden来隐藏溢出的li,通过滑动图片的方法来切换图片的显示

 <div class="all" id='box'>
        <div class="screen">
            <ul>
                <li><img src="images/wf1.jpg" width="500" height="200" /></li>
                <li><img src="images/wf2.jpg" width="500" height="200" /></li>
                <li><img src="images/wf3.jpg" width="500" height="200" /></li>
                <li><img src="images/wf4.jpg" width="500" height="200" /></li>
                <li><img src="images/wf5.jpg" width="500" height="200" /></li>
            </ul>
            <ol>
            </ol>
        </div>
        <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
    </div>

js代码实现轮播效果

 <script>
        var screen = document.getElementsByClassName("screen")[0];
        //获取ul元素
        var ul = screen.children[0];
        //获取ol元素
        var ol = screen.children[1];
         //获取ul中的li元素，得到的是一个动态数组（伪数组）
        var ul_lis = ul.getElementsByTagName("li");
        var box = document.getElementById("box");
        var arr = document.getElementById("arr");
        //获取左右两个按钮的元素
        var arr_left = arr.childNodes[0];
        var arr_right = arr.childNodes[1];
        //获取ol中的li元素，得到的是一个动态数组（伪数组）
        var ol_lis = ol.getElementsByTagName("li");
        var first_li = ul_lis[0];
        //获取图片的宽度
        var img_width = first_li.offsetWidth;
        
        //动态创建ol中的li
        for (var i = 0; i < ul_lis.length; i++) {
            var li = document.createElement("li");
            //为ol中的li创建一个新的属性index
            var index = li.setAttribute("index", i);
            //为li标签添加内容
            li.innerText = i + 1;
            //将创建的li放入ol中
            ol.appendChild(li);
            //排他法，默认让第一个高亮显示
            if (i == 0) {
                li.className = 'current';
            }
            li.onclick = liclick;
        }
        //鼠标经过时显示按钮,清除定时器
        box.onmouseenter = function () {
            arr.style.display = 'block';
            clearInterval(timer);
        }
        //划走后按钮影藏，开启一个新的定时器
        box.onmouseleave = function () {
            arr.style.display = 'none';
            timer = setInterval(fn, 1000);
        }

        //点击事件
        function liclick() {
            //先清空ol中的li的高亮显示；
            for (var i = 0; i < ol_lis.length; i++) {
                ol_lis[i].className = '';
            }
            //获取ol中li的index的属性值
            var index = parseInt(this.getAttribute("index"));
            //高亮显示
            this.className = 'current';
            //slid是图片滑动的方法，具体函数的封装见最下边
            slid(ul, -index * img_width);
        }
        //克隆复制第一张图片，由于到达最后一张时滑动需反向滑动才可以到达第一张图片，为了更加美观，我们需要在最后一张的后面复制第一张图片并且拼接上去，来达到连贯性；
        var clone_li = ul_lis[0].cloneNode(true);
        ul.appendChild(clone_li);

        //右边按钮的点击事件
        var index = 0;
        arr_right.onclick = function () {
            //当图片为最后一张的时候，让index=0，使图片从第一张开始
            // 由于克隆了一张图片，使其长度变为了6，所以要减一
            if (index == ul_lis.length - 1) {
                index = 0;
                ul.style.left = '0px';
            }
            index++;
            if (index < ul_lis.length - 1) {
                ol_lis[index].click();
            } else {
                slid(ul, -index * img_width);
                //清空高亮显示
                for (var i = 0; i < ol_lis.length; i++) {
                    ol_lis[i].className = '';
                }
                //最后一张图片时,让第一个ol中的li高亮显示
                ol_lis[0].className = 'current';
            }
        }
        //左边按钮的点击事件
        arr_left.onclick = function () {
            // 当轮到第一张图片的时候，让其从最后一张开始
            // 由于克隆了一张图片，使其长度变为了6，所以要减一
            if (index == 0) {
                index = ul_lis.length - 1;
                ul.style.left = -index * img_width + "px";
            }
            index--;
            ol_lis[index].click();
        }
        //*轮播
        function fn() {
            arr_right.onclick();
        }
        
       // 开启一个定时器
        var timer = setInterval(fn, 1000);
        
    //ul滑动轮播的效果
      var timerId = null
      //el指滑动的对象，target是滑动的距离
     function slid(el, target) {
    //判断是否有定时器存在，如果有就清空
    if (el.timerId) {
        clearInterval(el.timerId);
        el.timerId = null;
    }
     el.timerId = setInterval(function () {
        //定义步数step;
        var step = 10;
        //获取当前的位置
        var current = el.offsetLeft;
        //  判断当前元素是否超过目标位置，如果超过将setp改为负数，往回走
        if (current> target) {
            step = -Math.abs(step);
        }
        current += step;
        el.style.left = current + 'px';
        //判断当剩余距离不够一步的时候
        if (Math.abs(current - target) <= Math.abs(step)) {
            //清空定时器
            clearInterval(el.timerId);
            el.style.left = target + 'px';
        }
    },15)
}
    </script>