zoukankan html css js c++ java

简单的效果

<style type="text/css">
*{ margin:0px auto; padding:0px}
#xiala{ 200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;}
#xiala:hover{ cursor:pointer}
.list{ 200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-0px; display:none}
.list:hover{ cursor:pointer; background-color:#63C; color:white;}
</style>
</head>

<body>
<br />
<div style="500px; height:500px;">

	<div id="xiala" onclick="showa()"></div>
    <div class="list" onclick="xuan(this)">山东</div>
    <div class="list" onclick="xuan(this)">北京</div>
    <div class="list" onclick="xuan(this)">上海</div>
    <div class="list" onclick="xuan(this)">深圳</div>
    <div class="list" onclick="xuan(this)">广州</div>
    
</div>
<script type="text/javascript">
function showa()
{
	var list = document.getElementsByClassName("list");
	for(var i=0; i<list.length;i++)
	{
		list[i].style.display = "block";
	}
}

function xuan(a)
{
	var nr = a.innerHTML;
	document.getElementById("xiala").innerHTML=nr;
	
	var list = document.getElementsByClassName("list");
	for(var i=0; i<list.length;i++)
	{
		list[i].style.display = "none";
	}
}
</script>
</body>

  1 <style type="text/css">
  2 *{ margin:0px auto; padding:0px}
  3 #tp{ 100%; height:350px}
  4 .img{ display:none}
  5 #dian{ 200px; height:15px; position:relative; top:-25px}
  6 .yuan{ 13px; height:13px; float:left; margin-left:20px; border:2px solid #F00;border-radius:100px; background-color:#FFF}
  7 .yuan:hover{ cursor:pointer}
  8 </style>
  9 </head>
 10 
 11 <body>
 12 
 13 <div id="tp">
 14 
 15     <img style="display:block" class="img" src="images/201610281326233959.jpg" width="100%" height="350" />
 16     <img class="img" src="images/datu.jpg" width="100%" height="350" />
 17     <img class="img" src="images/5.gif" width="100%" height="350" />
 18     <img class="img" src="images/mk.jpg" width="100%" height="350" />
 19     <img class="img" src="images/tt.jpg" width="100%" height="350" />
 20 
 21 </div>
 22 
 23 <div id="dian">
 24     <div bs="0" class="yuan" onclick="xianshi(this,'0')"></div>
 25     <div bs="1" class="yuan" onclick="xianshi(this,'1')"></div>
 26     <div bs="2" class="yuan" onclick="xianshi(this,'2')"></div>
 27     <div bs="3" class="yuan" onclick="xianshi(this,'3')"></div>
 28     <div bs="4" class="yuan" onclick="xianshi(this,'4')"></div>
 29 </div>
 30 
 31 
 32 <script type="text/javascript">
 33 
 34 //图片索引
 35 var sy = 0;
 36 
 37 //间隔调用
 38 window.setInterval("Huan()",3000);
 39 
 40 //调一下换一个
 41 function Huan()
 42 {
 43     var img = document.getElementsByClassName("img");
 44     sy++; //索引加1
 45     
 46     //判断是否到了最后一张
 47     if(sy>=img.length)
 48     {
 49         sy=0;
 50     }
 51     
 52     //让所有隐藏
 53     for(var i=0;i<img.length;i++)
 54     {
 55         img[i].style.display="none";
 56     }
 57     //让下一张显示
 58     img[sy].style.display="block";
 59     
 60     //换圆点的样式
 61     var yuan = document.getElementsByClassName("yuan");
 62     
 63     for(var j=0;j<yuan.length;j++)
 64     {
 65         if(yuan[j].getAttribute("bs")==sy)
 66         {
 67             yuan[j].style.borderColor = "green";
 68         }
 69         else
 70         {
 71             yuan[j].style.borderColor = "red";
 72         }
 73     }
 74 }
 75 
 76 function xianshi(t,s)
 77 {
 78     sy=s;
 79     
 80     var img = document.getElementsByClassName("img");
 81     //让所有隐藏
 82     for(var i=0;i<img.length;i++)
 83     {
 84         img[i].style.display="none";
 85     }
 86     //让下一张显示
 87     img[s].style.display="block";
 88     
 89     //改自身样式
 90     var yuan = document.getElementsByClassName("yuan");
 91     
 92     for(var j=0;j<yuan.length;j++)
 93     {
 94         yuan[j].style.borderColor="red";
 95     }
 96     
 97     t.style.borderColor="green";
 98 }
 99 
100 </script>
101 </body>

轮播点击换图

  1 <style type="text/css">
  2 *{ margin:0px auto; padding:0px}
  3 #tp{ 100%; height:350px}
  4 .img{ display:none}
  5 #dian{ 200px; height:15px; position:relative; top:-25px}
  6 .yuan{ 13px; height:13px; float:left; margin-left:20px; border:2px solid #F00;border-radius:100px; background-color:#FFF}
  7 .yuan:hover{ cursor:pointer}
  8 </style>
  9 </head>
 10 
 11 <body>
 12 
 13 <div id="tp">
 14 
 15     <img style="display:block" class="img" src="images/201610281326233959.jpg" width="100%" height="350" />
 16     <img class="img" src="images/datu.jpg" width="100%" height="350" />
 17     <img class="img" src="images/5.gif" width="100%" height="350" />
 18     <img class="img" src="images/mk.jpg" width="100%" height="350" />
 19     <img class="img" src="images/tt.jpg" width="100%" height="350" />
 20 
 21 </div>
 22 
 23 <div id="dian">
 24     <div bs="0" class="yuan" onclick="xianshi(this,'0')"></div>
 25     <div bs="1" class="yuan" onclick="xianshi(this,'1')"></div>
 26     <div bs="2" class="yuan" onclick="xianshi(this,'2')"></div>
 27     <div bs="3" class="yuan" onclick="xianshi(this,'3')"></div>
 28     <div bs="4" class="yuan" onclick="xianshi(this,'4')"></div>
 29 </div>
 30 
 31 
 32 <script type="text/javascript">
 33 
 34 //图片索引
 35 var sy = 0;
 36 
 37 //间隔调用
 38 window.setInterval("Huan()",3000);
 39 
 40 //调一下换一个
 41 function Huan()
 42 {
 43     var img = document.getElementsByClassName("img");
 44     sy++; //索引加1
 45     
 46     //判断是否到了最后一张
 47     if(sy>=img.length)
 48     {
 49         sy=0;
 50     }
 51     
 52     //让所有隐藏
 53     for(var i=0;i<img.length;i++)
 54     {
 55         img[i].style.display="none";
 56     }
 57     //让下一张显示
 58     img[sy].style.display="block";
 59     
 60     //换圆点的样式
 61     var yuan = document.getElementsByClassName("yuan");
 62     
 63     for(var j=0;j<yuan.length;j++)
 64     {
 65         if(yuan[j].getAttribute("bs")==sy)
 66         {
 67             yuan[j].style.borderColor = "green";
 68         }
 69         else
 70         {
 71             yuan[j].style.borderColor = "red";
 72         }
 73     }
 74 }
 75 
 76 function xianshi(t,s)
 77 {
 78     sy=s;
 79     
 80     var img = document.getElementsByClassName("img");
 81     //让所有隐藏
 82     for(var i=0;i<img.length;i++)
 83     {
 84         img[i].style.display="none";
 85     }
 86     //让下一张显示
 87     img[s].style.display="block";
 88     
 89     //改自身样式
 90     var yuan = document.getElementsByClassName("yuan");
 91     
 92     for(var j=0;j<yuan.length;j++)
 93     {
 94         yuan[j].style.borderColor="red";
 95     }
 96     
 97     t.style.borderColor="green";
 98 }
 99 
100 </script>
101 </body>

查看全文

相关阅读:
关于jQuery方法解析(一)append-参数设置问题
 CSS动画
 关于html CSS 绝对相对布局问题
 Chrome自带的开发者工具使用方法教程
 web常见漏洞及防范方法
 前端性能优化 Web前端应该从哪些方面来优化网站?
属性的特征描述可以分为两类：数据属性和访问器属性
 iScroll.js的用法
 百度前端学院在线学习参考资料
 GET和POST的区别，何时使用POST？

原文地址：https://www.cnblogs.com/1358-com/p/6101315.html