首页 > 技术文章 > js大图轮播和倒计时

navyouth 2018-04-20 08:45 原文

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

 

推荐阅读