无缝轮播的实现及思路

最新推荐文章于 2023-02-20 20:49:33 发布

卡布奇诺卡卡卡

最新推荐文章于 2023-02-20 20:49:33 发布

阅读量290

点赞数

分类专栏：轮播图 js 前端文章标签： js javascript vue.js html5

本文链接：https://blog.csdn.net/cxxbzy/article/details/103641433

版权

js 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

轮播图

1 篇文章 0 订阅

订阅专栏

不多说了直接上代码，图片需要自己添加

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }


        i {
            display: inline-block;
            height: 40px;
            width: 40px;

            text-align: center;
            line-height: 40px;

            font-size: 30px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid red;
        }

        .wraper {
            width: 730px;
            height: 454px;
            margin: 0 auto;
            padding: 5px;
            border: 1px solid black;
            position: relative;
        }

        .box {
            width: 730px;
            height: 454px;
            position: relative;
            overflow: hidden;

        }

        ul {
            display: inline-block;
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;

        }

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

        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }

        .current {
            background-color: orangered;
            color: #fff;
        }

        #focusD {
            display: none;
        }
    </style>
</head>

<body>
    <section>


        <div class="wraper">
            <i id="left" style=" position: absolute;left: -43px;top: 50%;">&lt;</i>
            <i id="right" style=" position: absolute; right: -43px;top: 50%;">&gt;</i>
            <div class="box">

                <ul>
                    <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/6.jpg" alt=""></a></li>
                </ul>

                <div class="square">
                    <span class="current">1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>

                </div>

            </div>

        </div>
    </section>
    <script>
        var spans = document.querySelectorAll(".square>span")

        var ul = document.getElementsByTagName("ul")[0]
        //获取相框
        var box = document.getElementsByClassName("box")[0];
        //获取相框的宽度
        var boxWidth = box.offsetWidth;

        //为每一个span注册一个鼠标进入事件
        for (i = 0; i < spans.length; i++) {



            spans[i].setAttribute("index", i)
            spans[i].onmousemove = function () {
                for (j = 0; j < spans.length; j++) {
                    spans[j].className = ""
                }

                this.className = "current"
                var index = this.getAttribute("index")
                animate(ul, -boxWidth * index)
            }
        }

        //设置焦点轮播
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        //分别注册点击事件
        var count = 0;  //计数器
        right.onclick = function () {
            count++
            if (count > 5) {
                count = 0;
                animate(ul, -boxWidth * count)//调用下面封装好的函数

            }
            for (j = 0; j < spans.length; j++) {
                spans[j].className = ""
            }

            spans[count].className = "current"

            animate(ul, -boxWidth * count)//调用下面封装好的函数

        }



        var res = spans.length;  //计数器
        left.onclick = function () {
            res--
            if (res < 0) {
                res = spans.length;


            }
            for (j = 0; j < spans.length; j++) {
                spans[j].className = ""
            }

            spans[res].className = "current"

            animate(ul, -boxWidth * res)//这里调用下面的函数
        }




        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            //定时器的id值存储到对象的一个属性中
            element.timeId = setInterval(function () {
                //获取元素的当前的位置,数字类型
                var current = element.offsetLeft;
                //每次移动的距离
                var step = 10;
                step = current < target ? step : -step;
                //当前移动到位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 20);
        }

    </script>
</body>

</html>

卡布奇诺卡卡卡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
无缝轮播的实现及思路

不多说了直接上代码，图片需要自己添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫