<!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. Mapjoin和Reducejoin案例

    一.Mapjoin案例 1.需求:有两个文件,分别是订单表.商品表, 订单表有三个属性分别为订单时间.商品id.订单id(表示内容量大的表), 商品表有两个属性分别为商品id.商品名称(表示内容量小的 ...

  2. HDFS及其各组件的机制

    一.HDFS运行机制 概述:用户的文件会被切块后存储在多台datanode节点中,并且每个文件在整个集群中存放多个副本,副本的数量可以通过修改配置自己设定. HDFS:Hadoop Distribut ...

  3. Round#534 div.2-B Game with string

    唔,第一次参加,掉了好多分. http://codeforces.com/contest/1104/problem/B 不用考虑太多,string真的好厉害. #include<stdio.h& ...

  4. LightOJ 1031 Easy Game (区间DP)

    <题目链接> 题目大意: 给定一段序列,两人轮流取数,每人每次只能从序列的两端的任意一段取数,取的数字位置必须连续,个数不限,问你这两人取数的最大差值是多少. 解题分析: 每人取数时面对的 ...

  5. 如何在 code blocks中使用 mkl库

    为了安装caffe, 所以安装了mkl, 现在想在codeblock的项目中使用mkl. 设置mkl环境变量: mkl安装好后默认是在/opt/intel/mkl中,其中/opt/intel/mkl/ ...

  6. Chapter 4 : Control Structures 1 : Selection

    Although it need not be, the expression is usually an identifier. Whether it is an identifieror an e ...

  7. poj2976 Dropping tests（01分数规划 好题）

    https://vjudge.net/problem/POJ-2976 又是一波c++AC,g++WA的题.. 先推导公式:由题意得 Σa[i]/Σb[i]<=x,二分求最大x.化简为Σ(a[i ...

  8. __x__(28)0907第四天__固定布局

    布局 固定布局,需要计算单位 自适应响应布局  固定布局 html代码 <!doctype html> <html> <head> <meta charset ...

  9. 01_ if 练习

    prompt()        弹出一个对话框,该对话框中会带有一个文本框,用户可以在文本框中输入一段内容. 该函数需要一个字符串作为参数,用作对话框的提示文字. 用户输入内容,将会作为函数返回值.可 ...

  10. 条件结构if

    教程: 高能:语句结构都是由关键字开头,用冒号结束! 一:语句结构    if condition_1:    statement_block_1elif condition_2:    statem ...