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 ...

随机推荐

去掉firefox点击按钮时的虚线边框
去掉火狐里面点击按钮时候的虚线边框 button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[t ...
Web App 聊天样式
意见反馈: @using CommonDB.EF @model IEnumerable<Pub_ChatLog> @{ ViewBag.Title = "意见反馈"; ...
.NET防止SQL、JS、HTML注入
/// <summary> /// 过滤标记 /// </summary> /// <param name="NoHTML">包括HTML,脚本 ...
linq读书笔记2-查询内存中的对象
上次我们说到了linq对数组内容的检索,自.net2.0以后,泛型成了很常见的一种应用技术,linq对泛型的检索也提供了完善的支持如对list类型的支持,范例如下: class Program ...
CAShapeLayer + UIBezierPath
UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc) ...
java菜鸟篇<四> ZTree入门篇
今天准备入手ZTree,于是在百度上搜了搜,找到了开源网址和一些大神们的教程,于是乎下午开始了组织树(ZTree)的练习初步完整的作品是这个样子的: 1.咱们要去这个工具的开源网里找下载的东西: ( ...
bootstrap之 Badge 角标
添加 .am-badge class 到 <div> 或者 <span> 元素. 默认样式 <span class="am-badge"> ...
[转]C语言的那些秘密之---函数返回局部变量
一般的来说,函数是可以返回局部变量的. 局部变量的作用域只在函数内部,在函数返回后,局部变量的内存已经释放了.因此,如果函数返回的是局部变量的值,不涉及地址,程序不会出错.但是如果返回的是局部变量的地 ...
Python 自学笔记（一）环境搭建
一,关于Python的介绍关于Python的介绍,我不想多说了,网上随便一搜,很多介绍,这里我主要写下我的自学Python的过程,也是为了促进我能继续学习下去. 二,环境搭建 1,这里我只讲解Wi ...
经典面试题（二）附答案算法+数据结构+代码微软Microsoft、谷歌Google、百度、腾讯
1.正整数序列Q中的每个元素都至少能被正整数a和b中的一个整除,现给定a和b,需要计算出Q中的前几项, 例如,当a=3,b=5,N=6时,序列为3,5,6,9,10,12 (1).设计一个函数void ...

HTML——JAVASCRIPT练习题——图片轮播

HTML——JAVASCRIPT练习题——图片轮播的更多相关文章

随机推荐

热门专题