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张,所以定义 ...
随机推荐
- test1.xlsx
耿丹CS16-2班第三次作业汇总 排名 学号后三位 姓名 作业顺序 作业情况 第三周博客 总得分 博客园地址 1 232 周* 1 8.5 3 12.5 http://www.cnblogs.com/ ...
- bzoj violet系列 (2708~2725)
cbh大爷说:写博客不能弃坑. orz cbh 那我就来更新博客了. violet这个系列的题好神啊……出题人好劲啊…… ……怎么最近都在理性愉悦啊…… 另外bzoj400题纪念~ 2708: [Vi ...
- python之路十二
本节内容 数据库介绍 mysql 数据库安装使用 mysql管理 mysql 数据类型 常用mysql命令 创建数据库 外键 增删改查表 权限 事务 索引 python 操作mysql ORM sql ...
- appium V1.5.x变化
使用 npm安装 appium之后,会发现已经进入1.5 [Appium] Welcome to Appium v1.5.0 [Appium] Appium REST http interface l ...
- java代理类及AOP
1.代理架构图 2.AOP 3.动态代理概念 4.动态代理工作原理图
- CA扫盲的巅峰之作!!!
★ 先说一个通俗的例子 考虑到证书体系的相关知识比较枯燥.晦涩.俺先拿一个通俗的例子来说事儿. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 ...
- Git 常用命令详解
Git 是一个很强大的分布式版本管理工具,它不但适用于管理大型开源软件的源代码(如:linux kernel),管理私人的文档和源代码也有很多优势(如:wsi-lgame-pro) Git 的更多介绍 ...
- SQL多表查询,消除表中的重复的内容
看到朋友再写一个SQL语句:两个表a1表中有SN.SN2.TN,b1表有SM.SM2.TN2,若a1的SN中的数据和b1的SM中的数据是一致的,那么将a1中对应的数据修改成b1中对应的数据. upda ...
- Tern Sercer Tineout
- 非旋treap模板
bzoj3580 非旋转treap 在大神教导下发现split一段区间时先split右边再split左边比较好写 #include <cstdio> #include <cstdli ...