<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>picture</title>
</head>
<body><div >
    <img src="唐笑.jpg">
    <!--<img src="杜德伟.jpg">;-->
    <!--<img src="林俊杰.jpg">;-->
    <!--<img src="萧亚轩.jpg">;-->
    <div >
        <td><input type="button" value="1" onclick="change('唐笑')"></td>
        <td><input type="button" value="2"onclick="change('杜德伟')"></td>
        <td><input type="button" value="3" onclick="change('林俊杰')"></td>
        <td><input type="button" value="4" onclick="change('萧亚轩')"></td>
    </div>

</div>
<script>
//    <!--把图片和按钮先拿出来-->
    var picture = document.getElementsByTagName("img");
    var Button = document.getElementsByTagName("input");
//    定义图片更换的方法
    function change(i) {
        picture[0].src = i+".jpg"

    }
//    现在需要循环执行change()函数，就是依次将四个参数传给change函数，首先将四个名字放入一个数组里
//遍历这个数组，得到参数，一次调用change（）函数就ok了。
    var arrayObj = new Array("唐笑","杜德伟","林俊杰","萧亚轩");
    function zhixing() {
        for(i = 0;i<arrayObj.length;i++){
//        alert(arrayObj[i]);
          var pp = change(arrayObj[i]);
          setTimeout(pp,1000)
    }

    }

     setInterval(zhixing,1000)

</script>
</body></html>

js练习题之图片背景轮播的更多相关文章

  1. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jquery-自适应全屏背景轮播动画

    实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  3. jQuery图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  4. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  5. ViewPager实现图片的轮播

    在app中图片的轮播显示可以说是非常常见的实现效果了,其实现原理不过是利用ViewPager,然后利用handler每隔一定的时间将ViewPager的currentItem设置为当前item的pos ...

  6. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  7. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  8. 使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  9. iOS开发之三个Button实现图片无限轮播(参考手机淘宝，Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

随机推荐

  1. 洛谷T89644 palindrome回文串

    洛谷 T89643 回文串(并查集) 洛谷:https://www.luogu.org/problem/T89643 题目描述 由于 Kiana 实在是太忙了,所以今天的题里面没有 Kiana. 有一 ...

  2. Java数组相关算法一

    一.数组反转 1.方法一:创建新数组 int[] arr = {6,29,0,4,3}; int[] arr2 = new int[arr.length]; for (int i = 0; i < ...

  3. ES6 find 和 filter 的区别

    ES6 find 和 filter 的区别 : 遇到个功能是要分类就想说在前端过滤,不要从查数据库的时候过滤了.然后就想说除了filter还有啥好用的 发现有个find,测试一番之后发现 const ...

  4. webpack4.0.1的坑

    webpack4在2月底正式发布后,原来的很多做法不能使用,下面把使用webpack4.0.1过程中,出现的问题,一一记录,也欢迎大家补充,谢谢!团结就是力量,众人拾柴火焰高,加油! 关于webpac ...

  5. 断路器，AOP实现断路器模式 ------------Hystrix

    断路器:https://martinfowler.com/bliki/CircutiBreaker.html 核心思想: 在断路器对象中封装受保护的方法调用. 该断路器监控调用和断路情况 调用失败触发 ...

  6. [fw]Linux下tty/pty/pts/ptmx详解

    基本概念: 1> tty(终端设备的统称):tty一词源于Teletypes,或者teletypewriters,原来指的是电传打字机,是通过串行线用打印机键盘通过阅读和发送信息的东西,后来这东 ...

  7. 任务21 ：了解ASP.NET Core 依赖注入，看这篇就够了

    DI在.NET Core里面被提到了一个非常重要的位置, 这篇文章主要再给大家普及一下关于依赖注入的概念,身边有工作六七年的同事还个东西搞不清楚.另外再介绍一下.NET  Core的DI实现以及对实例 ...

  8. C#设计模式：策略者模式（Stragety Pattern）

    一,什么是策略模式? 1,针对同一命令或行为,不同的策略做不同的动作. 2,比如针对一组算法,将每个算法封装到具有公共接口的独立的类中,从而使它们可以相互替换.策略模式使得算法可以在不影响到客户端的情 ...

  9. TensorFlow学习——入门篇

    本文主要通过一个简单的 Demo 介绍 TensorFlow 初级 API 的使用方法,因为自己也是初学者,因此本文的目的主要是引导刚接触 TensorFlow 或者 机器学习的同学,能够从第一步开始 ...

  10. python常用函数 T

    timedelta() timedelta方法可以表示一个时间段,并可以进行计算,而且可以直接对datetime计算. 例子: today() datetime的today函数可以表示现在的时间. 例 ...