js代码如下

 <script type="text/javascript">

 var n=1;

 var map=new Array();

 map[0]=new Image();

 map[1]=new Image();

 map[2]=new Image();

 map[3]=new Image();

 map[4]=new Image();

 map[5]=new Image();

 map[0].src="data:images/0.jpg";

 map[1].src="data:images/1.jpg";

 map[2].src="data:images/2.jpg";

 map[3].src="data:images/3.jpg";

 map[4].src="data:images/4.jpg";

 map[5].src="data:images/5.jpg";

 function disp()

 {

 document.getElementById("img1").src=map[n].src;

 n=n+1;

 if (n>5)

 n=0;

 window.setTimeout("disp();",2000);

 }

 window.setTimeout("disp();",2000);

 </script>

自己替换掉图片地址和名称，以及切换时间。2000表示2秒 。

然后在<body>和</body>中间加上下面一段代码。

 <div id="content1">

 <img id="img1" src="data:images/0.jpg" width="100%" height="300px">

 </div>

js实现简单的图片轮播的更多相关文章

  1. js最简单焦点图片轮播代码

    将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...

  2. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  3. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  5. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. html+jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  7. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  8. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...

  9. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

随机推荐

  1. test1.xlsx

    耿丹CS16-2班第三次作业汇总 排名 学号后三位 姓名 作业顺序 作业情况 第三周博客 总得分 博客园地址 1 232 周* 1 8.5 3 12.5 http://www.cnblogs.com/ ...

  2. bzoj violet系列 （2708~2725）

    cbh大爷说:写博客不能弃坑. orz cbh 那我就来更新博客了. violet这个系列的题好神啊……出题人好劲啊…… ……怎么最近都在理性愉悦啊…… 另外bzoj400题纪念~ 2708: [Vi ...

  3. python之路十二

    本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql ORM sql ...

  4. appium V1.5.x变化

    使用 npm安装 appium之后,会发现已经进入1.5 [Appium] Welcome to Appium v1.5.0 [Appium] Appium REST http interface l ...

  5. java代理类及AOP

    1.代理架构图 2.AOP 3.动态代理概念 4.动态代理工作原理图

  6. CA扫盲的巅峰之作！！！

    ★ 先说一个通俗的例子 考虑到证书体系的相关知识比较枯燥.晦涩.俺先拿一个通俗的例子来说事儿. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 ...

  7. Git 常用命令详解

    Git 是一个很强大的分布式版本管理工具,它不但适用于管理大型开源软件的源代码(如:linux kernel),管理私人的文档和源代码也有很多优势(如:wsi-lgame-pro) Git 的更多介绍 ...

  8. SQL多表查询，消除表中的重复的内容

    看到朋友再写一个SQL语句:两个表a1表中有SN.SN2.TN,b1表有SM.SM2.TN2,若a1的SN中的数据和b1的SM中的数据是一致的,那么将a1中对应的数据修改成b1中对应的数据. upda ...

  9. Tern Sercer Tineout

  10. 非旋treap模板

    bzoj3580 非旋转treap 在大神教导下发现split一段区间时先split右边再split左边比较好写 #include <cstdio> #include <cstdli ...