1.图片切换
css样式
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.container{
width:600px;
margin:0 auto;
border:1px solid #000;
}
.container>ul{
overflow: hidden;
}
.container>ul>li{
float:left;
}
.main>img{
width:400px;
height:400px;
}
</style>
div
<div class='container'>
<ul>
<li>
<a href="#">
<img src="img/home1.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/home2.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/home3.jpg">
</a>
</li>
<li>
<a href="#">
<img src="img/home0.jpg">
</a>
</li>
</ul>
<div class='main'>
<img src="img/home1.jpg">
</div>
</div>
script
<script type="text/javascript">
var img=document.querySelectorAll('.container>ul>li>a>img');
console.log(img);
var mainImg=document.querySelector('.main>img');
console.log(mainImg);
for(var i=0;i<img.length;i++){
img[i].onclick=function(){
mainImg.src=this.src;
}
}
</script>
2.树形列表
css属性
div{float:left; height: 100px; line-height: 100px; }
#d1,#d3{ background-color: #ccff00; }
#d2{ cursor: pointer; background-color: #ffcc00; }
div
<div id="d1">树形列表</div>
<div id="d2"><<</div>
<div id="d3">内容的主体</div>
script
var d1=document.getElementById('d1');
var d2=document.getElementById('d2');
var d3=document.getElementById('d3');
d2.onclick=function(){
if(d2.innerHTML=='<<'){
d1.style.display='none';
d2.innerHTML='>>';
}else{
d1.style.display='block';
d2.innerHTML='<<'
}
}
3.万年历
css样式
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
div{
width:250px;
margin:0 auto;
background: #EAEAEA;
padding:10px;
}
ul{
overflow: hidden;
}
ul>li{
width:50px;
height:50px;
background: #000;
color:#fff;
float:left;
margin-top: 10px;
margin-right: 10px;
text-align: center;
font-weight: bold;
font-size: 16px;
padding-top:10px;
}
ul>li>b{
display: inline-block;
width:30px;
}
ul>li>p>b{
display: inline-block;
width:228px;
}
div>p{
width:228px;
height
margin:0 auto;
border:1px solid #fff;
background: #F1F1F1;
margin-top:5px;
}
ul>li>p{
display: none;
}
.active{
background: red;
}
div
<div>
<ul>
<li>
<b>1</b>JAN
<p><b>1月节日</b>元旦:1月1日至3日放假3天</p>
</li>
<li>
<b>2</b>FEB
<p><b>2月节日</b>春节:2月2日至8日放假7天</p>
</li>
<li>
<b>3</b>MAR
<p><b>3月节日</b>妇女节:3月8日妇女节，与你们无关</p>
</li>
<li>
<b>4</b>APR
<p><b>4月节日</b>清明:4月3日至5日放假3天</p>
</li>
<li>
<b>1</b>JAN
<p><b>5月节日</b>劳动节:4月30日至5月2日放假3天</p>
</li>
<li>
<b>2</b>FEB
<p><b>6月节日</b>端午节:6月4日至6日放假3天</p>
</li>
<li>
<b>3</b>MAR
<p><b>7月节日</b>小暑:7月7日小暑，不放假</p>
</li>
<li>
<b>4</b>APR
<p><b>8月节日</b>七夕节:8月6日七夕节,不放假</p>
</li>
<li>
<b>1</b>JAN
<p><b>9月节日</b>中秋节:9月10日至12日放假3天</p>
</li>
<li>
<b>2</b>FEB
<p><b>9月节日</b>国庆节:10月1日至7日放假7天</p>
</li>
<li>
<b>3</b>MAR
<p><b>11月节日</b>立冬:11月8日立冬。不放假</p>
</li>
<li>
<b>4</b>APR
<p><b>12月节日</b>艾滋病日:12月1日</p>
</li>
</ul>
<p></p>
</div>
script
<script type="text/javascript">
var li=document.querySelectorAll('div>ul>li');
for(var i=0;i<li.length;i++){
li[i].index = i;
li[i].onclick = function(){
alert(this.index);
if(this.classList[0] != "active"){
this.classList.add("active");
}else{
this.classList.remove("active");
}
}
}
var p=document.querySelector('div>p');
console.log(p);
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
this.style.background='#fff';
this.style.color='#f00';
console.log(this.children[1]);
p.innerHTML=this.children[1].innerHTML;
}
li[i].onmouseout=function(){
this.style.background='#000';
this.style.color='#fff';
p.innerHTML='';
}
}
</script>
网友评论