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张,所以定义 ...
随机推荐
- SPOJ FTOUR2 - Free tour II
Description 有些黑点,问你选择不超过 \(k\) 个黑点的路径,路径权值最大是多少. Sol 点分治. 这是qzc的论文题,不过我感觉他的翻译好强啊...我还是选择了自己去看题目... 点 ...
- idea 分支主干管理
1.创建分支 2.切换主干/分支 3.合并主干.分支
- linux配置网卡IP地址命令详细介绍及一些常用网络配置命令
linux配置网卡IP地址命令详细介绍及一些常用网络配置命令2010-- 个评论 收藏 我要投稿 Linux命令行下配置IP地址不像图形界面下那么方 便,完全需要我们手动配置,下面就给大家介绍几种配置 ...
- Mac 编写oracle 连接脚本
首先需要本地存有sqlplus命令, 如果没有则需要到官网下载 也可点击我进行下载 (解压 readme.txt 有安装配置说明): 在Oracle官网下载instant client for os ...
- 简化MSI在WIN10的安装
这里给大家分享一个简化MSI安装的工具 InstallByDrag: 在win10系统中,通过双击方式打开 MSI 安装文件,可能被提示由于dll加载问题无法安装,这是由于没有使用管理员权限运行.而M ...
- xtrabackup 使用说明（续）
背景: 关于物理备份工具xtrabackup的一些说明可以先看之前写过的文章说明:xtrabackup 安装使用.现在xtrabackup版本升级到了2.4.4,相比之前的2.1有了比较大的变化:in ...
- PowerDisner15 关于生成表带双""号问题
我们可以尝试在DBMS配置文件中修改相应的格式来解决. 在PowerDesigner中 选择 Database->Edit current database->Script->Sql ...
- 漫谈iOS程序的证书和签名机制
接触iOS开发半年,曾经也被这个主题坑的摸不着头脑,也在淘宝上买过企业证书签名这些服务,有大神都做了一个全自动的发布打包(不过此大神现在不卖企业证书了),甚是羡慕和崇拜.于是,花了一点时间去研究了一下 ...
- centos 使用 locate
centos 第一次使用locate时报错: locate: can not stat () `/var/lib/mlocate/mlocate.db': 没有那个文件或目录 因为locate相关的索 ...
- WinForm中重绘TabControl选项卡标题
最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...