js实现简单的图片轮播
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实现简单的图片轮播的更多相关文章
- js最简单焦点图片轮播代码
将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...
- 使用jQuery做简单的图片轮播效果
一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- html+jq实现简单的图片轮播
今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...
- 纯JS写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- 【原生JS】写最简单的图片轮播
非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display" ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
随机推荐
- Java Native Interface 六JNI中的异常
本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 在这里只讨论调用JNI方法可能会出现的异常, ...
- 整理：Javascript获取数组中的最大值和最小值的方法汇总
方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //最小值 Array.prototype.min = function ...
- (转)CString截取字符串全攻略
附:去掉空格方法 CString str("e w r we 中华ADF 华AG中"); newstr=str.Replace(" ", "&quo ...
- 小的div在大的div中垂直居中
方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"&g ...
- win10 设置声卡驱动 --- 解决喇叭没有声音！
win10 设置声卡驱动 --- 解决喇叭没有声音! 1)安装驱动,必须能够在:"控制面板\硬件和声音" 下找到安装好的: "Realtek高清晰音频管理器" ...
- 使用KRPano资源分析工具一键下载全景网站切片图
软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...
- java 使用正则表达式过滤HTML中标签
/** * 去掉文本中的html标签 * * @param inputString * @return */ public static String html2Text(String inputSt ...
- 获取文本的编码类型（from logparse）
import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.F ...
- Eclipse下载与安装
有很多小伙伴不知道eclipse在哪里下载以及怎么安装的,那我来给大家做个演示吧. 学习java比较常用的软件就是eclipse,而eclipse安装后并不能马上使用,还需要安装jdk并搭建环境.下面 ...
- Flex中的initialize,creationComplete和applicationComp
转自:http://blog.csdn.net/sjz168/article/details/7244374 1.Application标签中有三个事件initialize,creationCompl ...