定时器

在实现轮播图之前需要首先了解一下JavaScript的定时器 setInterval()和clearInterval()

1、setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数
语法：

setInterval(code, milliseconds);

2、clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作，clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值
语法：

clearInterval(id_of_setinterval)

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function test(){
                console.log("setInterval 调用了");
            }
            var timerID;
            function startDinshiqi(){
                timerID = setInterval("test()",2000);
            }

            function stopDingshiqi(){
                clearInterval(timerID);

            }

        </script>
    </head>
    <body>
        <input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
        <input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
    </body>
</html>

切换图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>

            function changeImg(){
//              alert("要切换了")
                var img = document.getElementById("img1");
                img.src = "../img/2.jpg";
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击切换图片" onclick="changeImg()" />
        <br />
        <img src="../img/1.jpg" id="img1" />
    </body>
</html>

图片自动轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script>
            var index = 0;

            function changeImg(){

                //1. 获得要切换图片的那个元素
                var img = document.getElementById("img1");

                //计算出当前要切换到第几张图片
                var curIndex = index%3 + 1;  //0,1,2
                img.src="../img/"+curIndex+".jpg";  //1,2,3
                //每切换完,索引加1
                index = index + 1;
            }

            function init(){

                setInterval("changeImg()",1000);
            }

        </script>
    </head>
    <body onload="init()">
        <img src="../img/1.jpg" width="100%" id="img1"/>
    </body>
</html>

JavaScript学习之自动轮播图片的更多相关文章

  1. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  2. js自动轮播图片的两种循环方法（原创）

    用5个div,布局从左到右5张图片,从左到右5个div分别指定ID为img1,img2,img3,img4,img5.(背景是relative,5个div是相对于背景absolute定位) 显示如下: ...

  3. javascript学习之带滚动条的图片

    之前找了好久没有找到,就自已动手写了一个: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. javascript实现简单的轮播图片

    方法一: <script> var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下. var timeInterval=1000; ...

  5. iOS 有关自动轮播图片

    //初始化当前视图 _currentImageView = [[UIImageView alloc] init]; [_currentImageView setImageWithURL:[NSURL ...

  6. JavaScript 简易版 自动轮播 手动轮播 菜鸟交流

    本人刚刚接触前端,许多知识还不了解,以前经常到博客园查询自己需要的东西,现在也终于反客为主了.作为新手,所展示的东西也是浅显易懂,希望同是新手的伙伴们共同交流.共同进步,若是成功捕获一位大大,也请您赐 ...

  7. jQuery自动轮播图片焦点图

    在线演示 本地下载

  8. 解决：使用 swiper 自动轮播图片，当拖动过 swiper 内的内容时，导致不继续自动轮播

    版本为1.3 当使用了 swiper 后: var mySwiper = new Swiper('.banner .swiper-container', { autoplay: 3000, loop: ...

  9. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

随机推荐

  1. Ethercat 学习总结一：协议总结

    原文地址:https://blog.csdn.net/qq923433160/article/details/83781812 EtherCAT 总线的国家标准相关资料,比较详细介绍了协议: http ...

  2. Fastjson 1.2.22-24 反序列化漏洞分析

    目录 0x00 废话 0x01 简单介绍 FastJson的简单使用 0x02 原理分析 分析POC 调试分析 0x03 复现过程 0x04 参考文章 0x00 废话 balabala 开始 0x01 ...

  3. wGenerator代码生成工具

    由来 以前一直用window系列的操作系统,有不少可以用的代码生成工具,如:动软的代码生成器(.net),可以自定义模板,然后按需生成代码.后来用mac系统,发现好像没有什么太好用的生成工具,所以自己 ...

  4. Vue源码解析（二）：数据驱动

    一.数据驱动: 数据驱动是vue.js最大的特点.在vue.js中,数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom.数据驱动还有一部分是数据更新驱动视图变化. ...

  5. .NET（C#、VB）APP开发——Smobiler平台控件介绍：SliderView控件

    SliderView控件 一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个SliderView控件到窗体界面上 ...

  6. 设计模式 | 模板方法模式（template method）

    定义: 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 结构:(书中图,侵删) 一个定义整体框架的父类 若干不同具体实现 ...

  7. 瑞芯微RKnanC芯片处理器介绍

    RKnanC是一种低成本.低功耗.高效率的数字多媒体芯片,它是基于ARM的低功耗处理器结构和硬件加速器.它是专为便携式音频产品应用,如MP3播放器等. RKnanC可以支持各种音频标准的解码,如MP3 ...

  8. lunix脚本进程挂掉时显示cpu和内存信息及挂掉的时间

    #!/bin/shwhile [ true ]; do #查询是否有8899正在运行的进程netstat -an|grep 8899if [ $? -ne 0 ]thennowtime=$(date ...

  9. FPGA高速ADC接口实战——250MSPS采样率ADC9481

    一.前言 最近忙于硕士毕业设计和论文,没有太多时间编写博客,现总结下之前在某个项目中用到的一个高速ADC接口设计部分.ADC这一器件经常用于无线通信.传感.测试测量等领域.目前数字系统对高速数据采集的 ...

  10. windows下gitbash安装教程

    下载安装 1.从git官网下载一个git安装包,官网下载地址http://www.git-scm.com/download/ 2.双击安装程序,进入欢迎界面点击[Next >] 3.阅读协议,点 ...