看着看着就晕了，反复看才能理解。感觉越来越难了。我现在感觉就是只要没有完全理解，头脑就是一团浆糊。只要理解了也就慢慢做出来了。
练习代码：
<!DOCTYPE html>
<html>
<head>
<title>轮播+tab切换</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
.div1{
width: 500px;height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
img{width: 500px;height: 300px;}
p{color: #fff;
width: 500px;height: 30px;
position: absolute;z-index: 1000;bottom: 0;left: 0;
text-align: center;
line-height: 30px;
}
p span{
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
background: rgba(254,254,254,0.6);
border-radius: 50%;
line-height: 20px;
cursor: pointer;
}
.div2{
width: 500px;
height: 300px;
margin: 50px auto;
}
#tab_bar {
width: 500px;
height: 20px;
float: left;
}
#tab_bar ul {
padding: 0px;
margin: 0px;
height: 20px;
text-align: center;
}
#tab_bar li {
list-style-type: none;
float: left;
width: 166.6px;
height: 20px;
background-color: gray;
}
.tab_css {
width: 500px;
height: 300px;
/*background-color: orange;*/
display: none;
float: left;
}
</style>
</head>
<body>
<div id="photo" class="div1">
<a href=""><img src="static/images/1.jpg"></a>
<a href=""><img src="static/images/2.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<p>
<span onclick="change(0)">1</span>
<span onclick="change(1)">2</span>
<span onclick="change(2)">3</span>
<span onclick="change(3)"> 4</span>
<span onclick="change(4)">5</span>
</p>
</div>
<hr>
<div class="div2">
<div id="tab_bar">
<ul>
<li id="tab1" onclick="myclick(1)" style="background-color: orange">
tab1
</li>
<li id="tab2" onclick="myclick(2)">
tab2
</li>
<li id="tab3" onclick="myclick(3)">
tab3
</li>
</ul>
</div>
<div class="tab_css" id="tab1_content" style="display: block">
<div><img src="static/images/1.jpg"></div>
</div>
<div class="tab_css" id="tab2_content">
<div><img src="static/images/2.jpg"></div>
</div>
<div class="tab_css" id="tab3_content">
<div><img src="static/images/3.jpg"></div>
</div>
</div>
<script type="text/javascript">
function change(num){
var obj=document.getElementById('photo');
var obj_a=obj.getElementsByTagName('a');
//隐藏a
for(var i=0;i<obj_a.length;i++){
obj_a[i].style.display="none";
}
obj_a[num].style.display="block"
}
</script>
<script type="text/javascript">
var myclick = function(v) {
var llis = document.getElementsByTagName("li");
for(var i = 0; i < llis.length; i++) {
var lli = llis[i];
if(lli == document.getElementById("tab" + v)) {
lli.style.backgroundColor = "orange";
} else {
lli.style.backgroundColor = "gray";
}
}
var divs = document.getElementsByClassName("tab_css");
for(var i = 0; i < divs.length; i++) {
var divv = divs[i];
if(divv == document.getElementById("tab" + v + "_content")) {
divv.style.display = "block";
} else {
divv.style.display = "none";
}
}
}
</script>
</body>
</html>