<!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. jmeter之JDBC Request各种数据库配置

    URL和JDBC驱动: Datebase Driver class Database URL MySQL com.mysql.jdbc.Driver jdbc:mysql://host:port/{d ...

  2. 入门级----黑盒测试、白盒测试、手工测试、自动化测试、探索性测试、单元测试、性能测试、数据库性能、压力测试、安全性测试、SQL注入、缓冲区溢出、环境测试

    黑盒测试 黑盒测试把产品软件当成是一个黑箱子,只有出口和入口,测试过程中只要知道往黑盒中输入什么东西,知道黑盒会出来什么结果就可以了,不需要了解黑箱子里面是如果做的. 即测试人员不用费神去理解软件里面 ...

  3. visual studio的包含目录配置问题

    早上将一个项目从debug x64修改到release x64,然后包含目录都是直接从debug拷贝过来的,一模一样的路径,一直说无法include,并且路径中的文件都是存在的,配置页面的releas ...

  4. 创建phpinfo(PHP探针)查看自己服务器空间php详细信息

    创建phpinfo(PHP探针)查看自己服务器空间php详细信息 <?phpphpinfo();?> 保存,然后更改文件名为phpinfo.php 放到你域名根目录,然后访问:http:/ ...

  5. Tornado-基于正则的路由和动态分页

    概览 这一小节涉及了三部分内容: 1.动态分页设计 2.基本的路由系统以及基于正则的路由 3.模块引擎的继承和导入 4.web项目文件夹和ReuquestHandler的分类 5.跨站脚本攻击 文件结 ...

  6. HTML5 页面编辑API之Range对象

    在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...

  7. 遍历其 interator

    当用户自定义数据结构的时候, 如果做遍历呢, 这个时候就需要遍历器 interator 了, 它允许用户定义遍历自己自定义数据结构的方式 当用户定义了iterator, 就可以使用 for of 来遍 ...

  8. Redis主从复制详解

    1. 概述 主从复制:主节点负责写数据,从节点负责读数据,主节点定期把数据同步到从节点保证数据的一致性 2. 主从复制的相关操作 (1)配置文件:在从服务器的配置文件中加入 slaveof<ma ...

  9. esp32固件烧录

    正常使用IO0置空即可.烧录时需要en引脚接高电平,IO0接地,使用乐鑫的烧录工具烧录即可.注意如果启用wifi,供电一定要不小于500ma,普通的usb转ttl模块无法满足wifi启动的,被坑的好惨 ...

  10. 用vue怎么写点击保存之后的返回的代码？

    点击完保存调用接口之后,如果使用  this.$router.go(-1); 返回到编辑页面,数据不会有更新,使用 this.$router.replace({ name: '信息展示', param ...