<!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">

			*{

				margin:0px auto;

				padding:0px;

				}

			#d1,.t{

				width:100%;

				height:620px;

				}

			.t{

				display:none;

				}

			.dian{

				float:left;

				width:20px;

				height:20px;

				border-radius:50%;

				border:1px solid #0F0;

				background-color:#fff;

				margin-left:10px;

				position:relative;

				top:-25px;

				right:-550px;

				}

			#d2{

				width:200px;

				height:20px;

				}

        </style>

    </head>

        <div id="d1">

            <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/22.jpg" style="display:block;"/>

            <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/2222.jpg"/>

            <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/8888.jpg"/>

            <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/77777.jpg"/>

            <img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/222222.jpg"/>

        </div>

        <div id="d2">

            <div class="dian" onclick="Tiao('0')" style="background-color:#c6f"></div>

            <div class="dian" onclick="Tiao('1')"></div>

            <div class="dian" onclick="Tiao('2')"></div>

            <div class="dian" onclick="Tiao('3')"></div>

            <div class="dian" onclick="Tiao('4')"></div>

        </div>

    <body>

    </body>

    <script type="text/javascript">

		var sy=0

		window.setInterval("Huan()",3000);

		function Huan()

		{

			var t=document.getElementsByClassName("t")

			sy++;

			if(sy>=t.length)

			{

				sy=0;

			}

			for(var i=0;i<t.length;i++)

			{

				t[i].style.display="none";

			}

			t[sy].style.display="block";

			var dian=document.getElementsByClassName("dian");

			for(var j=0;j<dian.length;j++)

			{

				dian[j].style.backgroundColor="#FFF";

			}

			dian[sy].style.backgroundColor="#c6f";

		}

		function Tiao(a)

		{

			sy=a;

			var t=document.getElementsByClassName("t");

			for(var i=0;i<t.length;i++)

			{

				t[i].style.display="none";

		    }

			t[a].style.display="block";

			var dian=document.getElementsByClassName("dian");

			for(var j=0;j<dian.length;j++)

			{

				dian[j].style.backgroundColor="#fff";

			}

			dian[a].style.backgroundColor="#c6f";

		}

    </script>

</html>

倒计时

  <body>

        <span id="shu">10</span>

        <input type="button" value="同意" disabled="disabled" id="anniu" />

    </body>

    <script type="text/javascript">

		window.setInterval("Tiao()",1000);

		//window.setTimeout("Tiao()",1000);

		function Tiao()

		{

			var s = document.getElementById("shu");

			//alert(s.innerHTML);

			var n =document.getElementById("anniu");

			if(parseInt(s.innerHTML)==0)

			{

				n.removeAttribute("disabled");

			}

			else

			{

				var x = parseInt(s.innerHTML)-1;

				s.innerHTML = x;

				//window.setTimeout("Tiao()",1000);

			}

		}

	</script>

js大图轮播和倒计时的更多相关文章

  1. 纯原生JS大图轮播

    CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...

  2. 利用JS做网页特效——大图轮播

    大图轮播完整流程代码操作: <style>            * {                margin: 0px;                padding: 0px;  ...

  3. [DBW]大图轮播，可通过两种方法实现

    通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...

  4. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  5. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  7. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  8. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  9. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. Pytorch学习(一)基础语法篇

    how to use pytorch 1.Tensor we can create a tensor just like creating a matrix the default type of a ...

  2. CLR Via 第一 章 知识点整理（2）程序集和CLR的启动

    这一节先简单的讨论一下程序集以及CLR的初始化 虽然对应的编译器会生成托管模块,但实际上CLR不与托管模块工作,编译器除了编译还有将生成的托管模块转换为程序集的功能,微软还提供了工具AL.exe(程序 ...

  3. angular笔记_10

    过滤器 currency:1:2:3                     与货币相关 第一个参数是符号 第二个参数是保留小数点几位 number:1                         ...

  4. YII2 用 in查询的时候出现无结果, 删除某些值后查询有结果 提前sort数组即可

    YII2 用 in查询的时候出现无结果, 删除某些值后查询有结果, 在数组前用了一个 array_merge 合并了2个数组. 排查发现是 数组中键值没有挨着从0开始 另外没有从小到大, 没观察室哪个 ...

  5. Linux中Hadoop的环境搭建

    一:下载安装 Hadoop 1.1:下载指定的Hadoop 1.2:通过XFTP把文件上传到master电脑bigData目录下 1.3:解压hadoop压缩文件 tar -xvf hadoop-2. ...

  6. Fliptile [POJ3279] [开关问题]

    题意 给定一张n*m的方格图,有1,0两种数字,每次可以选取一个十字进行翻转,1变成0,0变成1,问最少需要翻转几次,使它全部变成0,全部如果有重复的,按字典序最小的进行输出: 输入 第一行n,m 下 ...

  7. Contributed to JFairy

    虽然delay了一个多月才看到,但第一次被一个开源项目正式感谢,开心. 其实写过的很多东西都有机会contr的,只是有些是公司代码...

  8. 变量类型-String

    教程:一:字符串的创建 用单引号.双引号括起来,同时用转义字符转义 二:字符串的索引 变量[头标:尾标]    从前到后:0---end    从后到前:-1---->-len(str)三:获取 ...

  9. node 学习（二）

    写基础太麻烦了  我花了个基础知识的脑图

  10. java学习（五）--- 方法

    方法的定义 修饰符 返回值类型 方法名(参数类型 参数名){ ... 方法体 ... return 返回值; } 注意:非void方法必须有返回值 方法重载: 可以声明方法相同,但是参数类型不同的方法 ...