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. Sicily 1031: Campus （最短路）

    这是一道典型的最短路问题,直接用Dijkstra算法便可求解,主要是需要考虑输入的点是不是在已给出的地图中,具体看代码 #include<bits/stdc++.h> #define MA ...

  2. python re模块search()与match()区别

    re.search()搜索字符串并返回结果. 整个字符串搜索. re.match()匹配字符串并返回结果 从开始处匹配. 所以,match()可以理解为search()的一个子集.

  3. sublime注释插件DocBlockr

    DocBlockr很好用,不仅仅可以自动生成注释,还可以手动编辑注释的格式. 安装方法:  Cmd+Shift+P -> Install Package -> docblockr  win ...

  4. Spring框架学习（二）

    一.Spring IOC参数值注入 1.注入基本值 1.1)<value></value>元素可以通过字符串指定属性或构造参数的值.容器将字符串从java.lang.Strin ...

  5. Qt5.5.1编译出来的程序出现libgcc_s_dw2-1.dll的解决方案

    问题如图: 输入"myudp2016.exe 1  " 后出现 这是因为没有在系统环境变量path里加上相关路径,我们添加如下路径: 比如说WIN7系统-开始-计算机-右键-属性- ...

  6. Jquery知识点梳理

    Jquery $代表选择器 JS 选取元素 操作内容 操作属性 操作样式 <div id="aa" style="width:100px; height:100px ...

  7. Android版本与api Level

    Platform Version API Level VERSION_CODE Notes Android 4.4 19 KITKAT Platform Highlights Android 4.3 ...

  8. ubantu php7.0版本降级到php5.6

    http://askubuntu.com/questions/756879/cant-install-php5-on-ubuntu-16-04

  9. WinForm中重绘TabControl选项卡标题

    最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...

  10. 手机开发中的AP与BP的概念

    转自:http://blog.csdn.net/macong01/article/details/15504611 手机的AP和BP: AP:ApplicationProcessor,即应用芯片 BP ...