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张,所以定义 ...
随机推荐
- window.top.location.href 和 window.location.href 的区别
"window.location.href"."location.href"是本页面跳转. "parent.location.href" 是 ...
- Archlinux安装MySQL5.7.14压缩包版
现在Arch官方源里是MariaDB,MySQL扔到AUR里去了...感觉还是自己安装好些... (参考资料:度娘.官方文档) 贴配置: lts版的 在Vbox虚拟机测试 按照官方文档的安装步骤: 创 ...
- SDN/NFV运营商商业化部署
三大运营商发布未来网络架构,并逐步加快SDN/NFV商业化部署的步伐.中国联通发布其新一代网络架构<CUBE-Net 2.0白皮书>,并与20多家合作伙伴共同启动了“新一代网络”合作研发计 ...
- cacti汇总流量图-将数据合并后作图
在使用Cacti方便快捷的建立监控图时,往往根据实际应用必须监控几台甚至上百台服务器的汇总流量图来观察该应用服务器组的总流量等指标. 这里我们就来介绍如何用cacit快速的建立汇总流量图,其他汇总图建 ...
- xtrabackup 使用说明（续）
背景: 关于物理备份工具xtrabackup的一些说明可以先看之前写过的文章说明:xtrabackup 安装使用.现在xtrabackup版本升级到了2.4.4,相比之前的2.1有了比较大的变化:in ...
- HttpUtil
1.发送doPost请求,在web那边使用request.setCharacterEncoding("UTF-8");保证中文不乱码,不需要第三方jar包 public stati ...
- cocoapods真机调试出现问题解决
swift中使用cocoapods时,Podfile中必须写上 use_frameworks! 使用cocoapods导入框架在真机调试出现问题的解决方案: 1.build phases 2.+ ne ...
- shell 脚本随机抽取班级学生
#/bin/bash jw=(name1,name2,name3......name39) ..} do a=$(date +%N) b=$() ]" "${jw[$b]} don ...
- MVC之Model转Json
在开发中,有时我们需要在View层中拿到Model返回的数据并且是一个Json对象,那么我们就可以利用Newtonsoft.Json.JsonConvert.SerializeObject(Model ...
- Mysql Master-slave 主从配置
MySQL主从复制 场景描述:主数据库服务器:192.168.10.130,MySQL已经安装,并且无应用数据.从数据库服务器:192.168.10.131,MySQL已经安装,并且无应用数据. 2. ...