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. bzoj violet系列 （2708~2725）

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

  2. ArrayList和HashSet的Contains()方法（转）

    来源: ArrayList和HashSet的Contains()方法 笔试题: package com.champion.test.exam; import java.util.ArrayList; ...

  3. Feature Access

    在ArcGIS Server中发布支持Feature Access地图服务,你需要知道的几点: 所绘制的mxd地图文件中包含的数据,必须来自企业级数据库链接: mxd中包含的所有图层的数据,必须来自同 ...

  4. wap支付宝接口的问题

    今天在支付宝接口开发时,遇到的两个坑 第一个: https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.8nHr4i& ...

  5. 名词含义阅读 todolist

    1.node webkit 2.C#设计模式 3.算法导论 4.SQLSERVER RowNum() 5.图片文字识别 6.tuple 7.yield 8.Web语义化 (多用 p ul ol li ...

  6. Python 修改电脑DNS

    Pc电脑一般连网都是动态DHCP获取局域的IP地址,而且DNS服务器为自动获取地址.要修改DNS就要打开本地网络-本地连接- 属性- TCP/IP 手动修改DNS. 其实Python也可以通过WMI接 ...

  7. Python 实现Windows开机运行某软件

    开机运行:随系统启动的应用程序,当系统启动之后会自动加载的应用 在注册表中添加启动项便可实现开机启动. 代码如下: # -*- coding:utf-8 -*- import win32api imp ...

  8. MySQL和Lucene索引对比分析

    MySQL和Lucene都可以对数据构建索引并通过索引查询数据,一个是关系型数据库,一个是构建搜索引擎(Solr.ElasticSearch)的核心类库.两者的索引(index)有什么区别呢?以前写过 ...

  9. Linux系统GCC常用命令和GCC编译过程描述

    前言: GCC 原名为 GNU C 语言编译器(GNU C Compiler),因为它原本只能处理 C语言.GCC 很快地扩展,变得可处理 C++.后来又 扩展能够支持更多编程语言,如Fortran. ...

  10. CURL 模拟http提交

    1:CURL模拟get提交 private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETUR ...