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

从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. Codeforces Round #247 (Div. 2) D. Random Task

    D. Random Task time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. Failed to load project at 'xxx.xcodeproj', incompatible project version。

    Failed to load project at 'xxx.xcodeproj', incompatible project version. 更新最新的xcode,xcode高版本可以打开低版本的 ...

  3. Prometheus+Grafana+Altermanager搭建监控系统

    基本概念 Prometheus 时间序列化数据库,我的理解就是将数据打上标签,以时间维度存储.后面有机会在深入研究. Prometheus架构如下: Grafana Prometheus中存储的数据, ...

  4. Andrew Ng-ML-第十六章-异常检测

    1.问题动机 图1.飞机发动机检测例子 对飞机引擎的例子,如果选取了两个特征x1热量产生度,x2震动强度.并得到如下的图,如果有一个新的引擎来检测其是否正常,x_test,那么此时如果点落在和其他点正 ...

  5. python直接赋值、浅拷贝和深拷贝

    # 解: # import copy # names1=['Amir','Barry','Cgakes','Dao',[11,22,33]] # names2=names1#直接赋值,指向同一个对象 ...

  6. 剑指offer4

    中序遍历(LDR)是二叉树遍历的一种,也叫做中根遍历.中序周游.在二叉树中,先左后根再右.巧记:左根右. 现在有一个问题,已知二叉树的前序遍历和中序遍历:PreOrder:         GDAFE ...

  7. ngxin开启rewrite伪静态

    1.编辑nginx配置文件 vi /usr/local/nginx/conf/nginx.conf #include enable-php.conf; include enable-php-pathi ...

  8. yii2模板

    GridView 小部件在开发中常用的功能及技巧.持续更新中.... 数据网格或者说 GridView 小部件是Yii中最强大的部件之一.它有一个属性名叫 dataProvider ,这个属性能够提供 ...

  9. shell字符串操作技巧

    操作字符串 -------------- Bash支持超多的字符串操作,操作的种类和数量令人惊异.但不幸的是,这些工具缺乏集中性. 一些是参数替换的子集,但是另一些则属于UNIX的expr命令.这就导 ...

  10. 深入浅出JVM

    这篇文章简要解析了JVM的内部结构.下面这幅图展示了一个典型的JVM(符合JVM Specification Java SE 7 Edition)所具备的关键内部组件. 上图展示的所有这些组件都将在下 ...