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. iOS如何彻底避免数组越界

    我们先来看看有可能会出现的数组越界Crash的地方: ? 1 2 3 4 5 6 7 - (void)tableView:(UITableView *)tableView didSelectRowAt ...

  2. oracle与mysql创建表时的区别

    oracle创建表时,不支持在建表时同时增加字段注释.故采用以下方式: #创建表CREATE TABLE predict_data as ( id integer ), mid ), time dat ...

  3. list操作

    1.查看列表属性 >>> a = [1,2] >>> dir(a) ['__add__', '__class__', '__contains__', '__dela ...

  4. TJpgDec—轻量级JPEG解码器

    TJpgDec-轻量级JPEG解码器 本文由乌合之众lym瞎编,欢迎转载blog.cnblogs.net/oloroso 下文中解码一词皆由decompression/decompress翻译而来. ...

  5. 参数名ASCII码从小到大排序（字典序）

    /// <summary> /// Hashtable字典排序 /// </summary> /// <param name="parameters" ...

  6. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  7. SWFUpload多图上传、C#后端跨域传文件带参数

    前几天工作中用到了SWFUpload上传图片,涉及到跨域,因为前端无法实现跨域,所以只能把文件传到后端进行跨域请求,整理分享下. 效果图 前端 html部分 <!DOCTYPE html> ...

  8. asp.net 文件下载(txt,rar,pdf,word,excel,ppt)

    aspx 文件下载说起来一点都不难,但是在做的过程中还是遇到了一些小小的问题,就是因为这些小小的问题,导致解决起来实在是太难了,其中一个就是Response.End();导致下载文件出现线程终止的情况 ...

  9. Sublime Text 3 常用插件以及安装方法(转)

    http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧, ...

  10. angular $http 与form表单的select-->refine

    <!DOCTYPE html> <html ng-app="a2_15"> <head> <meta http-equiv="C ...