0324 JS

最新推荐文章于 2022-03-24 22:19:53 发布

shuren1991

最新推荐文章于 2022-03-24 22:19:53 发布

阅读量208

点赞数 1

分类专栏：学习文章标签： javascript 轮播图

本文链接：https://blog.csdn.net/shuren1991/article/details/65655333

版权

学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

运动

闪动,直接赋值
匀速运动,num=num+n(n为常数)

缓动（先快后慢，或者先慢后快）num = num + (终值-num)/10;结果会无限接近终值，但不能达到终值,所以最后最好加一个判定条件让值最后到达目标值，否值会一直处于无限循环计算状态。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #move{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="move"></div>
    <script>
        var move = document.getElementById('move');
        var num = 0;
        function Move(){
            if(num<499){ //若不需要严格到达目标值500，设置比500小即可
                // 先快后慢缓动
                num = num +(500-num)/50;
                move.style.left= num +"px"
            }

            //到达一定条件跳出上面无限逼近的计算；
            else if(num>499){
                num = 500;
                move.style.left= num +"px";
                clearInterval(t);
            }
        }
        var t = setInterval(Move,10)//定时器调用函数
    </script>
</body>
</html>

无缝的关键是，第1张图在末尾还要拼接1次；（如果banner宽度可以呈现多少张，就要在末尾拼接多少张）

如下为轮播4张图的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 600px;
            height: 200px;
            margin: 50px  auto 0;
            position: relative;
            overflow: hidden;

        }
        #content{
            width: 1800px;
            height: 200px;
            position: absolute;
        }
        #content li{
            list-style-type: none;
            float: left;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="content">
            <li><img src="01.jpg" alt=""></li>
            <li><img src="02.jpg" alt=""></li>
            <li><img src="03.jpg" alt=""></li>
            <li><img src="04.jpg" alt=""></li>

            <!-- 为了实现无缝连接，重复出现两张图，这样跳转的时候才不会出现断层的现象 -->
            <li><img src="01.jpg" alt=""></li>
            <li><img src="02.jpg" alt=""></li>
        </ul>
    </div>
    <script>
        var content = document.getElementById('content');
        var box = document.getElementById('box');

        function move(){
            var Left_value = content.offsetLeft;
            // 对于判定条件的设定，仍然是4张图的宽度，而不是6张
            if(Left_value>-1200){
                Left_value--;
                content.style.left=Left_value+"px";
            }
            else if(Left_value=-1200){
                Left_value = 0;
                content.style.left=Left_value+"px";
            }
        }

        // 利用定时器重复执行移动函数，实现无缝滚动
        function star(){
            var t = setInterval(move,10);
            // 鼠标悬浮时跳出定时器，必须写在执行移动的函数内部
            box.onmouseover = function(){
                clearInterval(t);
            }
        }
        star();//初次启动函数

        //鼠标离开时，执行移动函数
        box.onmouseout = function(){
            star();
        }
    </script>
</body>
</html>

shuren1991

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0324 JS

运动闪动,直接赋值匀速运动,num=num+n(n为常数)缓动（先快后慢，或者先慢后快）num = num + (终值-num)/10;结果会无限接近终值，但不能达到终值,所以最后最好加一个判定条件让值最后到达目标值，否值会一直处于无限循环计算状态。示例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫