js实现无缝自动轮播

最新推荐文章于 2024-02-06 18:20:41 发布

欢莱

最新推荐文章于 2024-02-06 18:20:41 发布

阅读量428

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/RR_chen/article/details/114434863

版权

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

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

        .box {
            width: 601px;
            height: 314px;
            margin: 150px 30%;
            padding: 5px;
            border: 1px solid blue;
        }

        .inner {
            width: 601px;
            height: 314px;
            overflow: hidden;
            position: relative;
        }

        .inner ul {
            list-style: none;
            width: 1000%;
            /*使得ul更宽，后面li能浮动到一行上*/
            position: absolute;
            top: 0;
            left: 0;
        }

        img {
            vertical-align: top;

        }

        li {
            float: left;
        }
    </style>
</head>

<body>
    <!-- 使li在一行上，ul是li父元素，ul多余的部分被隐藏 
    实现左右轮播效果，需移动ul，即向左移动一个图片的长度，
    -->
    <!-- 左右无缝自动轮播效果，原是6张图片，我们最后加1张第一张图片，一共7张图片
    当到最后一张图片时，由于第七张图片和第一张相同，所以我们直接跳到第一张 -->

    <div class="box" id="box">
        <div class="inner" id="inner">
            <!--相框-->
            <ul>
                <!-- 每张图片都可被点击跳转到网页，所以有a标签 -->
                <li id="li1"><a href="#"><img src="images/1.png" alt=""></a></li>
                <li><a href="#"><img src="images/2.png" alt=""></a></li>
                <li><a href="#"><img src="images/3.png" alt=""></a></li>
                <li><a href="#"><img src="images/4.png" alt=""></a></li>
                <li><a href="#"><img src="images/5.png" alt=""></a></li>
                <li><a href="#"><img src="images/6.png" alt=""></a></li>
                <li><a href="#"><img src="images/1.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <script>

          function my$(id) {
    　　　　　　return document.getElementById(id);
　　　　　　}

        //获取最外面的div
        var box = my$("box");
        //获取相框inner
        var inner = box.children[0];
        //获取inner相框的宽度,和照片宽度相等，因为inner的宽度就是内容的宽度，不包括内边距和边框
        var imgWidth = inner.offsetWidth;
        //获取ul
        var ulObj = inner.children[0];

        var timer = null;

        //鼠标进入消除定时器，停止自动轮播
        box.onmouseover = function () {
            if(timer) clearInterval(timer);
        }

        //鼠标离开，开启定时器，自动轮播
        var index = 1;
        box.onmouseout = function () {
            //无缝效果
            timer = setInterval(function () {
                if (index < ulObj.children.length) {
                    animate(ulObj, -index * imgWidth);   //函数在下面
                    index++;
                } else {
                    index = 1;
                    ulObj.style.left = 0;
                }
            }, 1000);     
        }
        //保证打开页面后，不用离开box，也能自动轮播
        box.onmouseout();
        



        //封装动画函数 设置任意的一个元素，移动到指定的目标位置
        function animate(element, target) {     //target 是目标位置，即元素的left值
            //先清理定时器
            clearInterval(element.timeId);
            //每隔20ms移动一段距离，直到目标位置
            //element.timeId设置元素的属性了，不能用var timeId，因为每点一次按钮就会产生一个定时器，叠加后div移动的就快了，不是20ms了
            element.timeId = setInterval(function () {

                //获取div的当前位置

                //如果样式的代码在style标签即<style>里设置的，不能用my$("dv").style.left获取
                //而是用my$("dv").offsetLeft获取。
                //若样式的代码在style属性即style="left:10px"里设置的，my$("dv").style.left和my$("dv").offsetLeft都可获取
                var current = element.offsetLeft;  //数字类型，没有px

                //div每次移动多少像素 即步数
                var step = 9;
                //正负，负是当前大于目标，往左走
                step = current < target ? step : -step;
                //每次移动后的位置
                current += step;

                if (Math.abs(target - current) > Math.abs(step)) {    //Math.abs()绝对值
                    //每次移动到的位置
                    element.style.left = current + "px";
                } else {
                    clearInterval(element.timeId);
                    //已经接近目标，直接等于目标，不用再慢慢移动
                    element.style.left = target + "px";
                }

            }, 10);

        }
    </script>
</body>

</html>

欢莱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现无缝自动轮播

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫