总结
通过学习JS知道了Class、Tag是一个集合，需要循环遍历，ID是唯一的选择器。通过JS修改style
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>photo</title>
<style type="text/css">
*{margin:0px;padding: 0px;}
.mid {width: 100%;background:rgba(234,234,234,0.3);}
.photo{
width: 400px;
height:300px;
margin:0px auto;
overflow: hidden;
position: relative;
}
.photo a {width: 400px;
height:300px;display:block;}
.photo a img{width: 400px;
height:300px;}
.photo_p {position: absolute;color: #009;bottom: 15px;left: 0px;width: 400px;height: 10px;line-height: 10px;text-align: center;z-index: 1001;}
.photo_p span {
display: inline-block;
background: rgba(234,234,234,0.6);
width: 20px;
height:20px;
border-radius: 50%;
line-height: 20px;
cursor: pointer;
}
.bg{background:rgba(234,234,234,0.2);width: 400px;height: 300px;position: absolute;top:0px;left:0px;z-index: 1000;}
#tab {
width: 605px;
height: 600px;
margin: 10px auto;
/*background: #ccc;*/
}
#tab ul {position: relative;}
#tab li {list-style: none;float: left;width: 100px;height: 40px;background: #ccc;line-height: 40px;text-align: center;border-left: 1px solid #e0e0e0;}
#tab li:first-child{border-left:none;border-top-left-radius: 10px;}
#tab li:last-child{border-top-right-radius: 10px;}
#tab li:hover {background: #999;cursor: pointer;}
.tab_two { width: 605px;height: 560px; position: absolute;z-index:99;background:rgba(234,234,234,0.5);top: 40px;left: 0px;display: none;}
.tab_two img {width: 400px;height: 300px;margin-top:100px;}
</style>
</head>
<body>
<div id="tab">
<ul>
<li onclick="tab('0')" class="tabli">推荐
<div class="tab_two" style="display: block;">
<img src="1.jpg" alt="">
</div>
</li >
<li onclick="tab('1')" class="tabli">国内
<div class="tab_two">
<img src="2.jpg" alt="">
</div></li>
<li onclick="tab('2')" class="tabli">国际
<div class="tab_two">
<img src="3.jpg" alt="">
</div></li>
<li onclick="tab('3')" class="tabli">娱乐
<div class="tab_two">
<img src="4.jpg" alt="">
</div></li>
<li onclick="tab('4')" class="tabli">体育
<div class="tab_two">
<img src="5.jpg" alt="">
</div></li>
<li onclick="tab('5')" class="tabli">科技<div class="tab_two">
<img src="6.jpg" alt="">
</div></li>
</ul>
</div>
<div class="mid">
<div class="photo">
<a href="#"><img src="1.jpg" alt=""></a>
<a href="#"><img src="2.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="4.jpg" alt=""></a>
<!-- <div class="bg"></div> -->
<p class="photo_p">
<span onclick="photo('0')">1</span>
<span onclick="photo('1')">2</span>
<span onclick="photo('2')">3</span>
<span onclick="photo('3')">4</span>
</p>
</div>
<span id="time">1</span>
<button type="button" onclick="clearInterval(t)">停止</button>
</div>
<script type="text/javascript">
function photo(count) {
var photoobj = document.getElementsByClassName('photo');
var photoobj_a = photoobj[0].getElementsByTagName('a');
var spanbg = photoobj[0].getElementsByTagName('span');
for (var i = 0; i < photoobj_a.length; i++) {
photoobj_a[i].style.display='none';
spanbg[i].style.background='rgba(234,234,234,0.3)';
}
photoobj_a[count].style.display='block';
spanbg[count].style.background='rgba(255,255,255,0.8)';
}
function tab(num) {
var tab_two = document.getElementsByClassName('tab_two');
var tabli = document.getElementsByClassName('tabli');
for (var i = 0; i < tab_two.length; i++) {
tab_two[i].style.display='none';
tabli[i].style.background='#ccc';
}
tab_two[num].style.display='block';
tabli[num].style.background='#999';
}
function bb(){
var time1 = document.getElementById('time')
function cc() {
var inner = time1.innerHTML
var i=1
i=i + parseInt(inner)
return i
}
time1.innerHTML=cc();
}
var t = self.setInterval("bb()",1000)
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
