标签：index ol 滚动 轮播 li ul lis var 无缝

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

页面样式

<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>

标签：index,ol,滚动,轮播,li,ul,lis,var,无缝
来源： https://blog.csdn.net/qq_44902858/article/details/111229053

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。