使用定时器，换个图片地址。

从1到5换，如果大于5了再跳到1，点击停止时关闭定时器。

<!--

Author: XiaoWen

Create a file: 2016-12-08 13:19:25

Last modified: 2016-12-08 13:39:27

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>自动小轮播</title>

  <style>

    ul,li{

      margin:0;

      padding:0;

      list-style:none;

    }

    ul,li,img{

      width: 300px;

      height: 200px;

      line-height:200px;

      overflow: hidden;

      background:#ccc;

      text-align:center;

    }

  </style>

</head>

<body>

  <input type="button" value="轮播">

  <input type="button" value="停止">

  <ul>

    <li><img src="" alt="1.jpg"></li>

  </ul>

  <script>

    var a_ipt=document.getElementsByTagName("input");

    var img=document.getElementsByTagName("img")[0];

    var tim; //定时器

    var i=1; //图片名

    a_ipt[0].onclick=function(){

      tim=setInterval(function(){

        img.alt=i+1+".jpg"; //当然是从下一张开始播

        i++;

        if(i%5==0){ //超过5张从第一张开始

          i=0;

        }

      },100)

    }

    a_ipt[1].onclick=function(){

      clearInterval(tim);

    }

  </script>

</body>

</html>

js自动小轮播的更多相关文章

  1. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  2. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  3. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  4. ios之无限 自动 图片轮播器的实现

    比较之前发布的手动无限图片轮播器进行了改进.实现了自动无限轮播的功能.比较适合团购标题分类下面的轮播器功能. 实现思路: * 开启一个定时器,把操作放入消息循环池.每隔一定时间,操作执行一次. * 注 ...

  5. Android之仿京东淘宝的自动无限轮播控件

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...

  6. jQuery与原生js实现banner轮播图

    jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...

  7. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  8. 原生js实现无缝轮播

    原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...

  9. 非常简单的方法实现ViewPager自动循环轮播

    非常简单的方法实现ViewPager自动循环轮播,见红色代码部分,其它的代码可以忽略不看. 简洁高效是我解决问题的首要出发点. package com.shuivy.happylendandreadb ...

随机推荐

  1. 定时任务，AlarmManager使用

    CoderLt   定时任务,AlarmManager使用 项目需要:实现一个定时提醒的功能 查阅资料知道,需要使用AlarmManager AlarmManager介绍: AlarmManager是 ...

  2. 004-spring cloud gateway-网关请求处理过程

    一.网关请求处理过程 客户端向Spring Cloud Gateway发出请求.如果网关处理程序映射确定请求与路由匹配,则将其发送到网关Web处理程序.此处理程序运行通过特定于请求的过滤器链发送请求. ...

  3. pythonon ddt数据驱动二（json, yaml 驱动）

    这一篇主要是关于文件的数据驱动. 一.通过json文件驱动 @ddt class MyTest(unittest.TestCase): @file_data('test_data_list.json' ...

  4. tfs代码上传到server并下载到新位置

    1.svn与git代码管理原理基本一致,基于文档管理,能看到文件代码,通过设置文件的只读属性来控制代码. 而tfs是基于sqlserver及lock来管理,看不见代码文件 2.tfs没有自己的用户管理 ...

  5. MySQL从删库到跑路_高级（五）——触发器

    作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.触发器简介 1.触发器简介 触发器是和表关联的特殊的存储过程,可以再插入,删除或修改表中的数据时触发执行,比数据 ...

  6. Linux基础命令---head

    head 显示文件开头的几行,默认显示10行,可以使用选项-n来指定行数.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法   ...

  7. centos 网卡名称修改

    在centos6.4之前,如果6.2,6.3安装后网卡名称都是em开始,如果想用eth0这种名称,或者是自定义名称,可以参照以下来实施. 第一步:修改/boot/grub/grub.conf增加一个 ...

  8. 使用 jQuery 进行前端验证

    前段验证脚本的教程,其基础为jQuery的插件validate.    一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...

  9. MySQL Crash Course #14# Chapter 22. Using Views

    索引 视图是啥 为什么需要视图 使用视图的规则 如何使用视图 视图应用实例 别用视图更新数据! 视图是啥 理解视图的最佳方式就是看下面这个例子. SELECT cust_name, cust_cont ...

  10. kafka生产者和消费者

    在使用kafka时,有时候为验证应用程序,需要手动读取消息或者手动生成消息.这个时候可以借助kafka-console-consumer.sh和kafka-console-producer.sh 这两 ...