HTML——JAVASCRIPT练习题——图片轮播
方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<title>无标题文档</title>
<style type="text/css">
#tu
{
width:400px;
float:left; }
#a,#b,#c,#d,#e,#f,#g
{
width:500px;
height:350px;
float:left;
float:left;
}
</style> </head>
<body>
<div id="tu">
<img id="a" src="207.jpg" style="display:block"/>
<img id="b" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/>
<img id="c" src="1.gif" style="display:none"/>
<img id="d" src="3-1.jpg" style="display:none"/>
<img id="e" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
<img id="f" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/>
<img id="g" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
</div>
</body>
<script type="text/javascript">
var jihe=new Array();
jihe[]=document.getElementById("a");
jihe[]=document.getElementById("b");
jihe[]=document.getElementById("c");
jihe[]=document.getElementById("d");
jihe[]=document.getElementById("e");
jihe[]=document.getElementById("f");
jihe[]=document.getElementById("g"); var n=;
function change()
{
n++;
if(n==)
{
jihe[].style.display="block";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none"; }
else if(n==)
{
jihe[].style.display="none";
jihe[].style.display="block";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
}
else if(n==)
{
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="block";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
}
else if(n==)
{
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="block";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
}
else if(n==)
{
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="block";
jihe[].style.display="none";
jihe[].style.display="none";
}
else if(n==)
{
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="block";
jihe[].style.display="none";
}
else if(n==)
{
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="none";
jihe[].style.display="block";
}
else
{
n=;
}
window.setTimeout("change()",); }
window.setTimeout("change()",);
</script>
</html>
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tu
{
width:400px;
float:left; }
#a,#b,#c,#d,#e,#f,#g
{
width:500px;
height:350px;
float:left;
float:left;
}
</style>
</head>
<body>
<div id="tu">
<img id="a" src="042815_Nano_468_605.jpg" style="display:block"/>
<img id="b" src="RadArt1_922.jpg" style="display:none"/>
<img id="c" src="zebrafish-522_0.jpg" style="display:none"/>
<img id="d" src="Wheat-original_605.jpg" style="display:none"/>
<img id="e" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
<img id="f" src="t01ba56e06b53e9d8ba.jpg" style="display:none"/>
<img id="g" src="TFMW20150411_Yale_0022_NEW_Rotator.jpg" style="display:none"/>
</div>
</body>
<script type="text/javascript">
var jihe=new Array();
jihe[]=document.getElementById("a");
jihe[]=document.getElementById("b");
jihe[]=document.getElementById("c");
jihe[]=document.getElementById("d");
jihe[]=document.getElementById("e");
jihe[]=document.getElementById("f");
jihe[]=document.getElementById("g"); var n=;
function change()
{
n++;
if(n==)
{
n=;
} hideall(jihe);
jihe[n].style.display="block"; window.setTimeout("change()",); }
function hideall(a)
{
for(var i=;i<;i++)
{
a[i].style.display="none";
}
}
window.setTimeout("change()",);
</script> </html>
方法三：老师版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<div id="d" style="background-image:url(3-1.jpg); height:200px; width:200px;"></div>
</body>
<script type="text/javascript">
var img=new Array();
img[]="url(042815_Nano_468_605.jpg)";
img[]="url(RadArt1_922.jpg)";
img[]="url(zebrafish-522_0.jpg)";
img[]="url(TFMW20150411_Yale_0022_NEW_Rotator.jpg)";
img[]="url(t01ba56e06b53e9d8ba.jpg)"; var n=;
function change()
{
if(n==)
{
n=;
}
else
{
n++;
}
document.getElementById("d").style.backgroundImage=img[n];
window.setTimeout("change()",);
}
window.setTimeout("change()",); </script>
</html>
HTML——JAVASCRIPT练习题——图片轮播的更多相关文章
- javascript 实现图片轮播和点击切换功能
图片轮播是网页上一个比较常见的功能,下面我们来实现他吧 原理很简单: 1:固定的区域,所有的图片重叠,一次只能显示一张图片 2:通过改变图片的zIndex属性改变显示的图片,就可以达到切换的效果了 & ...
- JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
- 原生Javascript实现图片轮播效果
首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
详情请查看http://aehyok.com/Blog/Detail/32.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
- JavaScript实现图片轮播图
<!DOCTYPE html><html> <head> <script > var time; function init(){ //设置定时操作 t ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- html+css+javascript实现简易轮播图片
html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <lin ...
- JavaScript对象(document对象 图片轮播)
图片轮播: 需要注意的HTML需要img标签,他和input标签一样,是非封闭的标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
随机推荐
- react-native 布局基础
宽度单位和像素密度 react的宽度不支持百分比,设置宽度时不需要带单位 {width: 10}, 那么10代表的具体宽度是多少呢? 不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧 ...
- 每日一发linux命令
很多用虚拟机的同学在向/tmp目录下进行解压的时候,会发现之前挂载的此目录空间不足,导致下一步无法进行(我在vmwaretools解压的时候就遇到了这个problem)…… 实际上,/tmp是可以进行 ...
- mysql配置的讲解 mysql的root密码重置 mysql的登录
一,MySQL配置的讲解 port 默认mysql端口 socket 用于服务器端和客户端通信的套连接文字 skip-locking 取消文件系统的外部锁 key_buffer_size 索引缓 ...
- Git使用过程
Git-------目前世界上最先进的分布式版本控制系统(没有之一) 什么是版本控制系统? 说简单点,就是一个文件,对其增加.删除.修改都可以被记录下来,不仅自己可以修改,其他人也可以进行修改 每次对 ...
- asp生命周期
笔记:如果不对,欢迎指出来. 当一个用户访问一个页面,实际是发送http请求到服务器,而http请求其实是socket发送特定规范(协议)的文字(报文). 然后服务器的http.sys内核模块接受 请 ...
- session进程和服务
session如果是存在进程内的话,当进程重启,session数据就会丢失. 所以就找到了个办法,不吧session放在进程内,而是放在服务器上.这样子只要服务器不重启,session数据就不会丢失. ...
- Lua编译
编译lua包含3部分内容:lua库文件(lua*.lib),lua解释器(lua.exe),lua编译器(luac.exe) 首先: 下载源代码,编译批处理(以5.2.3为例): cd srccl / ...
- 关于twitter的GIF变mp4的测试
这个事是好久之前听说了,今天FQ的时候突然想起来了,就去测试了一下这个gif转MP4到底有多神奇... 这个是我的twitter地址:https://twitter.com/chendatony31 ...
- PHP根据身份证号码验证、获取星座、生肖和性别函数
首先介绍一下身份证含义 新的18位身份证号码各位的含义:1-2位省.自治区.直辖市代码:3-4位地级市.盟.自治州代码:5-6位县.县级市.区代码:7-14位出生年月日,比如19670401代表196 ...
- Listview注意事项
1.缓存 @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder ho ...