zoukankan      html  css  js  c++  java
  • js两个定时器实现轮播图

    另辟蹊径实现轮播图的方法:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- jquery网络引用地址 -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <title> 两个定时器实现轮播图</title>
    </head>
    
    <body>
        <img id="app" src="./images/1.jpg" />
        <br />
        <button id="clear">停止轮播</button>
        <button id="continue">继续轮播</button>
        <button id="pre">上一张</button>
        <button id="next">下一张</button>
        <script>
            //要遍历的图片路径数组
            var images = ['./images/1.jpg', './images/2.jpg', './images/3.jpg'];
            //获取图片对象
            var image = document.getElementById("app");
            //下标
            var index = 0;
            //定时器
            var interval, timeOut = 0;
            $(function () {
                // 绑定清除两个定时器的方法
                $("#clear").click(function () {
                    console.log('清除定时器');
                    window.clearInterval(interval);
                    window.clearTimeout(timeOut);
                });
    
                // 对两个定时器进行重新赋值
                $("#continue").click(function () {
                    console.log('继续执行定时器');
                    interval = setInterval(function () {
                        timeOut = setTimeout(() => {
                            if (index > (images.length - 1)) {
                                index = 0;
                            }
                            image.src = images[index];
                            index++;
                        }, 1000);
                    }, 1500);
                });
    
                // 根据下标切换图片
                $("#next").click(function () {
                    console.log('下一张')
                    index++;
                    if (index > (images.length - 1)) {
                        index = 0;
                    }
                    image.src = images[index];
                });
    
                // 根据下标切换图片
                $("#pre").click(function () {
                    console.log('上一张')
                    index--;
                    if (index < 0) {
                        index = images.length - 1;
                    }
                    image.src = images[index];
                });
    
                // 默认执行主体
                interval = setInterval(function () {
                    timeOut = setTimeout(() => {
                        if (index > (images.length - 1)) {
                            index = 0;
                        }
                        image.src = images[index];
                        index++;
                    }, 1000);
                }, 1500);
    
            });
        </script>
    </body>
    
    </html>

    项目结构:

  • 相关阅读:
    Python Revisited Day 13 (正则表达式)
    Python Revisited Day 06 (面向对象程序设计)
    Python Revisited (变量)
    Python Revisited Day 05(模块)
    Python Revisited Day 04 (控制结构与函数)
    Python Revisited Day 03 (组合数据类型)
    Numpy
    Python Revisited Day 01
    Python3使用openpyxl读写Excel文件
    Python3操作YAML文件
  • 原文地址:https://www.cnblogs.com/mxh-java/p/13253435.html
Copyright © 2011-2022 走看看