定时器+延时器（轮播图的实现）

最新推荐文章于 2023-12-13 08:36:02 发布



最新推荐文章于 2023-12-13 08:36:02 发布

阅读量571

点赞数 1

分类专栏：经典案例文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_44978043/article/details/120210461

版权

经典案例专栏收录该内容

14 篇文章 0 订阅

订阅专栏

定时器

JavaScript语法服务网页效果，网页中经常会出现一些指定时间、指定周期执行的动画效果。语法中提供了两种定时器函数支持指定时间执行、指定周期执行的效果

setTimeout(fn,time) ：在指定的time（ms）时间之后执行某个函数fn
setInterval（fn,time）:玄幻间隔时间time（ms）之后执行某个函数fn
基本语法

setTimeout(function() {
	console.log('我是延时两秒后执行的延时器')
},2000)
setInterval(function() {
	console.log('我是每隔2秒钟执行的定时器')
},2000)

经典延时器案例：网页弹窗广告

javascript代码

  // 获取弹窗div
        var div = document.querySelector('div');
        // 获取关闭按钮
        var span = document.querySelector('span');
        // 设置定时器，使弹窗两秒钟之后弹出
        setTimeout(function () {
            div.style.display = 'block';
            // 设置定时器，使弹窗弹出之后两秒后关闭按钮出现
            setTimeout(function () {
                span.style.display = 'block'
            }, 2000)
        }, 2000);
        // 给关闭按钮添加点击事件,点击按钮之后弹窗关闭,且在2秒之后继续弹出
        span.onclick = function () {
            div.style.display = 'none';
            setTimeout(function () {
                div.style.display = 'block';
                setTimeout(function () {
                    span.style.display = 'block'
                }, 2000)
            }, 2000)
        }

html+css代码

<style>
        div {
            width: 200px;
            height: 200px;
            background: #000;
            position: fixed;
            display: none;
            right: 0;
            bottom: 0;
        }

        span {
            color: white;
            position: absolute;
            right: 0;
            top: 0;
            display: none;
        }
    </style>
<body>
    <div>
        <span>x</span>
    </div>

计时器经典案例：网页轮播图的实现

JavaScript代码

window.addEventListener('load', function () {
//   获取ul
    var ul = document.querySelector('ul');
    // 获取ul 中的li
   
    // 设置一个变量，判断当前播放的为第几张图
    var n = 1;
    // 设置ul位移的初始距离
    var wid = 0;
    setInterval(function () {
        // 计算动画运动时应该位移的距离
        wid = n * (-parseInt(getStyle(lis[0], "width")))
    // 判断当前是否是最后一张
        if (n >= lis.length) {
            // 初始化变量，使播放图片直接跳到第一张
            n = 1;
            wid = -parseInt(getStyle(lis[0], "width"));
            ul.style.left = 0;
        }
        // 调用封装好的动画函数，传递需要运动的标签名，运动的方向，运动速度，目标位置
        move(ul, "left", -10, wid);
        n++;
    }, 3000);
})

封装获取指定元素属性的函数

function getStyle(ele, styleName) {
    if (ele.currentStyle) {
        return ele.currentStyle[styleName]
    } else {
        return getComputedStyle(ele)[styleName];
    }
}

封装动画函数

var timer = null;
function move(ele, styleName, speed, positioned) {
    // console.log(ele,styleName,speed,positioned);
    clearInterval(timer);

    var direction = getStyle(ele, styleName);
    timer = setInterval(function () {

        direction = parseInt(direction) + speed;
        if ((speed > 0 && direction > positioned) || (speed < 0 && direction < positioned)) {
            clearInterval(timer);
            return;
        }
        ele.style[styleName] = direction + 'px';
    }, 10)
}

html+css代码(图片需手动替换)

* {
            margin: 0;
            padding: 0;
        }

        .box {
            padding: 0 0 40px;
            width: 600px;
            height: 410px;
            background: grey;
            margin: 300px auto;
            position: relative;
            overflow: hidden;
        }

        img {
            width: 600px;
            height: 400px;
            transition: all 2s linear;
        }

        ul {
            position: absolute;
            left: 0;
            width: 8600px;
            list-style: none;
            white-space: nowrap;
            /* margin-left: -600px; */
            /* overflow: hidden; */
        }

        li {
            float: left;
            transition: all 2s linear;
        }

        .bar1,
        .bar2 {
            width: 50px;
            height: 50px;
            background: #fff;
            position: absolute;
            top: 50%;
            margin-top: -50px;
            cursor: pointer;
            opacity: 0.2;
            font-weight: bold;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            z-index: 5;
        }

        .bar1 {
            left: 0;
        }

        .bar2 {
            right: 0;
        }

        p {
            color: #fff;
            text-align: center;
        }
<div class="box">
        <div class="top">
            <p><span class="count">1</span>/ <span>8</span></p>
        </div>
        <div class="bar1">
            <</div> <div class="bar2">>
        </div>
        <ul>
            <li>
                <img src="./images/x1.jpg" alt="">
            </li>
            <li>
                <img src="./images/x2.jpg" alt="">
            </li>
            <li>
                <img src="./images/x3.jpg" alt="">
            </li>
            <li>
                <img src="./images/x4.jpg" alt="">
            </li>
            <li>
                <img src="./images/x5.jpg" alt="">
            </li>
            <li>
                <img src="./images/x6.jpg" alt="">
            </li>
            <li>
                <img src="./images/x7.jpg" alt="">
            </li>
            <li>
                <img src="./images/x8.jpg" alt="">
            </li>
            <li>
                <img src="./images/x1.jpg" alt="">
            </li>
        </ul>
        <p class="title">大圣娶亲</p>
    </div>
    <script src="./outer.js"></script>
    <script src="./homework.js"></script>



关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
定时器+延时器（轮播图的实现）

定时器JavaScript语法服务网页效果，网页中经常会出现一些指定时间、指定周期执行的动画效果。语法中提供了两种定时器函数支持指定时间执行、指定周期执行的效果setTimeout(fn,time) ：在指定的time（ms）时间之后执行某个函数fnsetInterval（fn,time）:玄幻间隔时间time（ms）之后执行某个函数fn基本语法setTimeout(function() { console.log('我是延时两秒后执行的延时器')},2000)setInterval(f
复制链接

扫一扫