实例 实现简单轮播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#photo{
width:600px;
height:400px;
margin:50px auto;
overflow: hidden;
position: relative;
}
#photo img{
width:100%;
height:100%;
}
.o{
position:absolute;
bottom:10px;
left:50%;
height:20px;
line-height:20px;
width: 120px;
margin-left:-60px;
}
.o span{
display: inline-block;
width: 20px;
height: 20px;
background: rgba(254, 254, 254, 0.60);
text-align:center;
cursor:pointer;
border-radius:50%;
}
</style>
</head>
<body>
<div id="photo">
<img src="https://p2.cdn.img9.top/ipfs/QmPic3JeudQs47Y2b548Wyn1cMW582ZeLmtTq6EBJfZwwx?2.jpg" alt="">
<img src="https://p3.cdn.img9.top/ipfs/QmdGhcs3pHW4q4hsLy9V7Ujf8T9ejUY6o21Gf87UZBEEb6?3.jpg" alt="">
<img src="https://p1.cdn.img9.top/ipfs/QmPQYT8c61wDDpyZzGBRVd3PfnK26stk3FpxmBMEciNSBE?1.jpg" alt="">
<img src="https://p3.cdn.img9.top/ipfs/QmZKpzPhZMc3WFRNwj2TWkLvMKvBdQpGNtkBtQjSobdt3H?3.jpg" alt="">
<img src="https://p2.cdn.img9.top/ipfs/QmNZP5rrSavs2VeQ4xKsmhDuwcbWAH8fDSQy47cDoYtPGQ?2.jpg" alt="">
<div class="o">
<span onclick="move(0);">1</span>
<span onclick="move(1);">2</span>
<span onclick="move(2);">3</span>
<span onclick="move(3);">4</span>
<span onclick="move(4);">5</span>
</div>
</div>
<script>
function move(num){
var p = document.getElementById('photo');
var obj_a = p.getElementsByClassName('o')[0];
var obj_span = obj_a.getElementsByTagName('span');
var obj_img = p.getElementsByTagName('img');
for(var i = 0;i<obj_img.length;i++){
obj_img[i].style.display='none';
}
obj_img[num].style.display="block";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
body {
background-color: #383838;
font-family: Arial, sans-serif;
line-height: 1.5;
color: #464646;
}
*{padding:0;margin:0;}
ol,ul{list-style:none;}
.tab-wrapper {
margin: 60px auto;
width: 70%;
max-width:500px;
}
.tab-menu li {
position:relative;
background-color: #fff;
color:#bcbcbc;
display: inline-block;
padding: 20px 40px;
opacity: 0.8;
cursor:pointer;
z-index:0;
}
.tab-menu li:hover {
color:#464646;
}
.tab-menu li.active {
color:#464646;
opacity: 1;
}
.tab-menu li.active:hover {
color:#464646;
}
.tab-content>div {
background-color: #fff;
box-sizing:border-box;
width: 100%;
padding: 50px;
min-height:200px;
}
.line {
position:absolute;
width: 0;
height: 7px;
background-color: aqua;
top: 0;
left: 0;
}
.hide{
display: none;
}
.show{
display: block;
}
</style>
</head>
<body>
<div class="tab-wrapper">
<ul class="tab-menu">
<li class="active" >tab #1</li>
<li class="">tab #2</li>
<li class="">tab #3</li>
</ul>
<div class="tab-content">
<div class="show">tab1</div>
<div class="hide">tab2</div>
<div class="hide">tab3</div>
</div><!-- //tab-content -->
</div>
<script>
var menu = document.getElementsByClassName('tab-menu')[0].getElementsByTagName('li');
var content = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');
(function changeTab(){
for(var i=0;i<menu.length;i++){
menu[i].onclick=showTab;
}
})();
function showTab(){
for(var i=0;i<menu.length;i++){
if(menu[i]===this){
menu[i].className='active';
content[i].className='show';
}else{
menu[i].className='';
content[i].className='hide';
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
