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. js基础总结

    DOM 节点 document节点  nodeType:9 文本节点  nodeType:3 元素节点  nodeType:1 注释节点  nodeType:8 属性节点  nodeType:2 at ...

  2. C#在二维码中添加圆角logo

    public class QRCodeHelper { #region 合并用户QR图片和用户头像 /// <summary> /// 合并用户QR图片和用户头像 /// </sum ...

  3. erlang 健壮性

    erlang 提供了简单易用的并发编程模型,基本不需要再考虑多线程并发问题.但实际应用中并不是那么的完美,很多地方需要注意,就算标准库也有不少问题.很多在多线程编程中很多很容易解决的事情,在erlan ...

  4. 用SQL SERVER取分组数据第一条：查出每个班级的成绩第一名

    create table test (id int, name ), score int, classname )); ,,'一班'); ,,'一班'); ,,'一班'); ,,'二班'); ,,'二 ...

  5. RIDE小技巧——Content Assistance快捷键(CTRL+空格)的修改

    大家在用RIDE Content Assistance功能的快捷键时会与机器中是输入法的切换相冲突,这里提供一下修改的位置,大家可以根据个人的喜好修改. 有三处需要修改: {Python_home}\ ...

  6. Windows 网络通讯开发

    Windows 网络通讯开发 一.Windows网络开发API 由于C++标准库中没有网络库,所以进行网络开发的时候要调用系统API.Windows通讯开发API包括以下几个基本函数及成员类型: 1. ...

  7. MySql 里的IFNULL、NULLIF和ISNULL用法

    MySql 里的IFNULL.NULLIF和ISNULL用法 mysql中isnull,ifnull,nullif的用法如下: isnull(expr) 的用法: 如expr 为null,那么isnu ...

  8. UIWebView获取网页点击事件

    //接收web事件 -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request nav ...

  9. eclipse工具常用快捷键总结

    1.  ctrl + shift + r  可以根据类名快速找到你所需要的类名称 2.  ctrl + shift + i  debug的时候可以查看代码的值 3.  ctrl + shift + f ...

  10. ASP.NET知识总结（9.使用Cookies实现购物车）

    ListInfo.aspx向购物车的添加商品的方法 private void GouWu(string name, double price, string id) { //往购物车中添加商品 Htt ...