实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 500px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
li{
list-style: none;
}
ul li img{
width: 500px;
height: 300px;
}
ul.oul1 p{
position: absolute;
width: 500px;
height: 30px;
left: 0;
bottom: 0;
text-align: center;
}
.oul1 a{
display: inline-block;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
border-radius: 10px;
background: rgba(0,0,0,0.7);
line-height: 20px;
}
ul.oul2 p{
position: absolute;
width: 500px;
height: 30px;
left: 0;
top: 0;
box-sizing: border-box;
}
ul.oul2 span{
display: inline-block;
color: white;
width:96px;
height: 20px;
background: rgba(0,0,0,0.7);
line-height: 20px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="oul1">
<li>
<img src="images/timg1.jpg" />
</li>
<li>
<img src="images/timg2.jpg" />
</li>
<li>
<img src="images/timg3.jpg" />
</li>
<li>
<img src="images/timg4.jpg" />
</li>
<li>
<img src="images/timg5.jpg" />
</li>
<p>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</p>
</ul>
<ul class="oul2">
<li>
<img src="images/timg1.jpg" />
</li>
<li>
<img src="images/timg2.jpg" />
</li>
<li>
<img src="images/timg3.jpg" />
</li>
<li>
<img src="images/timg4.jpg" />
</li>
<li>
<img src="images/timg5.jpg" />
</li>
<p>
<span onclick="change(0)">朱一龙1</span>
<span onclick="change(1)">朱一龙2</span>
<span onclick="change(2)">徐正曦1</span>
<span onclick="change(3)">徐正曦2</span>
<span onclick="change(4)">朱一龙3</span>
</p>
</ul>
<script>
/*
【案例1】实现简单轮播效果
【案例2】利用上课内容完成tab切换效果
*/
var oUl=document.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var oA=oUl.getElementsByTagName('a');
for(var i=0;i<oA.length;i++){
oA[i].onmouseover=function(){
var _index = this.innerHTML-1;
console.log(this.innerHTML);
for(var j=0;j<oLi.length;j++){
oLi[j].style.display='none';
}
oLi[_index].style.display='block';
oA[_index].style.color='red';
}
oA[i].onmouseout=function(){
var _index = this.innerHTML-1;
console.log(this.innerHTML);
oA[_index].style.color='white';
}
}
/* 【案例2】利用上课内容完成tab切换效果*/
function change(num){
var oUl2=document.getElementsByTagName('ul')[1];
var oLi2=oUl2.getElementsByTagName('li');
var oA=oUl2.getElementsByTagName('span');
for(var i=0;i<oLi2.length;i++){
oLi2[i].style.display='none';
}
oLi2[num].style.display='block';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例