<!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. 当linux报 “-bash: fork: 无法分配内存”

    “-bash: fork: 无法分配内存”,发现连了好多终端,然后断开了一个终端,然后这边终端可以敲命令了 [root@172.16.31.105 /home/www/test]# free -m  ...

  2. 我的第二本译作《精通OpenStack》上架啦：书籍介绍和译者序

    1. 书籍简介 英文书名:Mastering OpenStack Second Edition 作者:[德] 奥马尔-海德希尔(Omar Khedher)[印] 坚登-杜塔-乔杜里(Chanda Du ...

  3. java之微信支付通知

    微信支付,是现在大多数平台都需要接入的一个支付方式,没办法,谁让现在的用户都习惯了这种消费方式呢 我今天只说说微信支付通知,我们后台怎么接收通知,并把我们的订单的状态改为已支付, 至于为什么不说支付的 ...

  4. JavaScript的几种克隆（clone)方式【转】

    一:在Javascript里,如果克隆对象是基本类型,我们直接赋值就可以了: var sStr = "kingwell"; var cStr = sStr; alert(cStr) ...

  5. Jmeter学习系列----3 配置元件之计数器

    在做测试时,会遇到一种需求:在大量数据的情况下,数据不能重复或者需要自增,基于这种形式,我们可以考虑使用计数器. 计数器(counter): 计数器配置允许用户配置起始点,最大值和增量. 计数器将从开 ...

  6. (79)Wangdao.com第十五天_JavaScript 对象的继承_prototype原型对象_封装_函数式编程

    javascript 内置了许多 function 函数(){...} js 执行首先就会执行自己内置的函数定义 (function Function.function Object) 对象的继承 大 ...

  7. SSM的 日常错误 之 mybatis

    HTTP Status 500 - Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemExc ...

  8. Python自学知识点----Day03

    cd指令说明 1).作用:切换工作目录. 2).   命令(注意空格)         含义 cd ~===cd             回到家目录 cd .                     ...

  9. day27、28 二十八、项目：选课系统

    选课系统 作业要求 角色:学校.学生.课程.讲师 要求: 1. 创建北京.上海 2 所学校 ----> 创建学校 2. 创建linux , python , go 3个课程 , linux\py ...

  10. java_基础_abstract抽象关键字

    java中,当父类中的某些东西不确定时,可以用abstract关键字将此类变成抽象类(也就是说类并不完整,有些东西要等待子类去实现) 注意事项: 1.抽象类中的抽象方法不能有实体,格式如下 publi ...