用JS写一个无缝滚动轮播图

最新推荐文章于 2022-11-05 16:33:29 发布

minimore_zhd

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量231

点赞数

文章标签： js html css javascript

本文链接：https://blog.csdn.net/minimorezhd/article/details/111400136

版权

大家在学习js的dom和bom的时候，一定遇到了一个比较大的麻烦，那就是轮播图今天来个写一个最常见的顺序轮播图

搭建html和css

其实html和css的内容挺简单的主要就是放上需要轮播的照片，然后把照片固定在合适的地方即可

书写js代码

轮播图的主要内容，也是最难的地方。
我直接把注释的需要理解的地方都写在代码里面了
所以大家直接看代码就好

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            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>
</head>

<body>
    <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>
    <!-- <script src="js/animate.js"></script> -->
    <script>
        var box = document.getElementById('box')
        var arr = document.getElementById('arr')
        var screen = document.getElementsByClassName('screen')[0]
        var ul = screen.children[0]
        var ol = screen.children[1]
        var lis = ul.children
        var f_li = ul.children[0]
        var img_width = f_li.offsetWidth
        var arr_l = document.getElementById('left')
        var arr_r = document.getElementById('right')

        //循环创建ol里面的li 就是图片右下方对应的按钮
        for (var i = 0; i < lis.length; i++) {
            var li = document.createElement('li')
            li.innerText = i + 1
                //因为下标是从0开始 但是按钮是从1开始
            li.setAttribute('index', i)
                //给每个按钮添加一个属性 方便与图片对应
            ol.appendChild(li)
            if (i == 0) {
                li.className = 'current'
                    //设置默认为第一张图 
            }
            li.onclick = Liclick
                //设置每一个按钮的点击事件
        }
        //上面创建li之后 将其赋一个新名字 内容其实与上面的li是一样的
        var ol_li = ol.getElementsByTagName('li') // var ol_li = ol.children //两种都一样
        console.log(ol_li);
        //封装函数
        function Liclick() {
            for (var i = 0; i < ol_li.length; i++) {
                ol_li[i].className = ""
                    //排他思想 先让所有的按钮都不显示被选中
            }
            var li_index = parseInt(this.getAttribute('index'))
                //获取按钮的index值赋值给li_index
            index = li_index
                //使按钮的下标与图片的下标相等
            this.className = 'current'
                //使当前选中的按钮显示颜色
            animate(ul, -li_index * img_width)
                //  要动的东西       要动的距离
                //            因为每动一次都是一张图片的width下标对应最终是动几张图的距离
        }

        box.onmouseenter = function() {
            arr.style.display = 'block'
            if (timerId) {
                clearInterval(timerId)
                timerId = null
            }
            //鼠标滑进来显示左右的箭头 每次滑进来时停止计时器停止轮播
        }
        box.onmouseleave = function() {
            arr.style.display = 'none'
            timerId = setInterval(function() {
                    arr_r.click()
                }, 1000)
                //鼠标滑出去的时候隐藏左右的箭头 开始计时器继续轮播
        }
        var index = 0
            //图片下标
        arr_r.onclick = function() {
            if (index == lis.length - 1) {
                index = 0
                ul.style.left = '0px'
                    //当图片下标等于5时 就是轮播到最后一张图时图片下标变为0
                    //因为克隆了第一张图 所以length = 6
            }
            index++
            //点一下 图片下标加1
            if (index < lis.length - 1) {
                ol_li[index].click()
                    //点一下arr_r相当于点了一下按钮
            } else {
                //当轮播到第六张的时候 其实是显示克隆的那张
                animate(ul, -index * img_width)
                for (var i = 0; i < ol_li.length; i++) {
                    ol_li[i].className = ''
                }
                ol_li[0].className = 'current'
                    //下标为0则按钮为1  让按钮1显示选中
            }
        }

        arr_l.onclick = function() {
            if (index == 0) {
                index = lis.length - 1
                ul.style.left = -index * img_width + 'px'
                    //点击的时候如果下标为0 则将其下标改为最后一张图的下标
            }
            index--
            ol_li[index].click()
                //点一下arr_l相当于点了一下按钮
        }

        var timerId = setInterval(function() {
                arr_r.click()
            }, 1000)
            //添加定时器 每过一秒进行一次轮播

        var clone_li = f_li.cloneNode(true)
        ul.appendChild(clone_li)
            //克隆第一张照片

            //封装的函数
        function animate(a, b) {
            //a为移动的目标 b为移动的距离
            if (a.timeId) {
                clearInterval(a.timeId)
                a.timeId = null
            } //只能有一个定时器 有第二个就清除
            a.timeId = setInterval(function() {
                var x = a.offsetLeft
                    //起始的位置 第一次启动则为0
                var step = 10
                    //每次前进的距离
                if (x >= b) {
                    step = -Math.abs(step)
                }
                //如果起始位置大于目标位置就往回走 不大于就往前走
                x += step
                    //step是正数的话往前走 否则往回走
                a.style.left = x + 'px'
                    //将值传给position
                if (Math.abs(x - b) < step) {
                    a.style.left = b + 'px'
                    clearInterval(a.timeId)
                        //如果第二次传的值跟第一次传的值相差小于step则直接将第二次的值赋给position
                }
            }, 10)
        }
    </script>
</body>

</html>

今天的轮播图就到这里啦，咋们下期再见。

minimore_zhd

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
用JS写一个无缝滚动轮播图

大家在学习js的dom和bom的时候，一定遇到了一个比较大的麻烦，那就是轮播图今天来个写一个最常见的顺序轮播图搭建html和css其实html和css的内容挺简单的主要就是放上需要轮播的照片，然后把照片固定在合适的地方即可书写js代码轮播图的主要内容，也是最难的地方。我直接把注释的需要理解的地方都写在代码里面了所以大家直接看代码就好<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫