<!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. (二)文档请求不同源之flash跨域

    对于FLash,IE是认object标签的,但是FF和Chrome是认embed标签的. 1.客户端 <param name="allowScriptAccess" valu ...

  2. 面试题：常用的http状态码

    3XX 重定向 301 Moved Permanently    永久重定向,表示请求的资源已经永久的搬到了其他位置 302 Found  临时重定向,表示请求的资源临时搬到了其他位置 303 See ...

  3. Redis自学笔记:4.4进阶-消息通知

    4.4消息通知 4.4.1任务队列 传递任务的队列.与任务队列进行交互的实体有两类,一类是生产者,一类是消费者. 生产者将需要处理的任务放入任务队列中,二消费者不断从任务队列中读入任务 信息并执行. ...

  4. 英语口语练习系列-C39-舞蹈-谈论昨天的活动

    词汇-舞蹈(dancing) ballet body shaking sway the body have a good figure special training arm movement da ...

  5. [jzoj]2538.【NOIP2009TG】Hankson 的趣味题

    Link https://jzoj.net/senior/#main/show/2538 Description Hanks 博士是BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫H ...

  6. CSS入门介绍（一）

    css 层叠样式表(英文名:Cascading Style Sheets),主要用于美化网页 1.css的表现形式 1.1 行内样式(内嵌样式) 写在标签内的样式,写在标签的开始部分的内部,style ...

  7. 51nod 1617 奇偶数组

    传送门 回来看一眼51nod,发现自己掉到rank4了,赶紧切道题回rank3. 一眼不会做,这种东西应该慢慢找规律吧……然后看到数据范围其实比较小,应该是单次log的,那是不是可以分治啊. #inc ...

  8. 函数防抖 & 函数节流

    避免一个函数频繁执行 - 避免程序卡顿 js 是单线程的,setTimeout 这样的函数是异步的 异步的代码,交给对应的模块进行处理 模块在会将异步任务,在主线程执行完所有同步代码后,加入事件队列 ...

  9. 移动端无法复制：使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  10. laravel整合workerman做消息推送系统

    官方建议分离 workerman和mvc框架的结合,我去,这不是有点脑缺氧吗? 大量的业务逻辑,去独立增加方法和类库在写一次,实际业务中是不现实和不实际的 gateway增加一些这方面的工作,但是我看 ...