一.分页案例：
<head>
<meta charset="UTF-8">
<title>分页</title>
<style type="text/css">
ul li{
list-style: none;
width: 50px;
height: 50px;
line-height: 50px;
float: left;
border: 1px solid cyan;
text-align: center;
cursor: pointer;
}
.active{
background: orange;
}
</style>
</head>
<body>
<ul>
<li><<</li>
<li class="active pages" name="pages">1</li>
<li class="pages" name="pages">2</li>
<li class="pages" name="pages">3</li>
<li class="pages" name="pages">4</li>
<li>>></li>
</ul>
<script>
//1.点击页码 对应的页码颜色改变 给多个元素添加点击事件
//2.当前是谁 点的是向前还是相后 给一个元素添加点击事件
//向前 2==>active
//相后 4==>active
var aPages = document.getElementsByName("pages")
var len = aPages.length;
for(var i = 0; i<len; i++){
aPages[i].onclick = function(){
//this==>当前被点击的对象
change(this)
}
}
//显示当前,隐藏所有
function change(obj){
for(var j =0; j<len; j++){
aPages[j].className = "";
}
obj.className = "active";
}
</script>
</body>
二.选项卡案例：
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
#div1 div{
width: 300px;
height: 300px;
border: 1px solid cyan;
display: none;
}
.active{
background: orange;
}
</style>
</head>
<body>
<div id="div1">
<button class="active">1</button>
<button>2</button>
<button>3</button>
<div style="display: block;">111111</div>
<div>222222</div>
<div>333333</div>
</div>
<script>
var div1 = document.getElementById("div1")
var aBtn = div1.getElementsByTagName("button")
var aDiv = div1.getElementsByTagName("div")
//1.给一组元素添加点击事件
for(var i = 0; i<aBtn.length; i++){
aBtn[i].index = i;//给每个btn添加自定义属性，每个自定义属性为i
aBtn[i].onclick = function(){
//去掉所有
for(var j = 0; j<aBtn.length; j++){
aBtn[j].claseName = "";
aDiv[j].style.display = "none"
}
//当前
this.className = "active"
//this==>被点击的btn 找到对应的div
aDiv[this.index].style.display = "block";
}
}
</script>
</body>
三.轮播图案例：
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
*{padding: 0; margin: 0;}
li{list-style: none;}
#focus{
width: 400px;
height: 250px;
margin: auto;
border: 1px solid green;
}
#focus #item li{
width: 400px;
display: none;
}
#focus #item img{
width: 100%;
}
</style>
</head>
<body>
<div id="focus">
<ul id="item">
<li><img src="img/0.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
<ul id="pagging">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="" id="prev"></a>
<a href="" id="next"></a>
</div>
<script>
var timer = null;
var index = 0;
var focus = document.getElementById("focus");
var item = document.getElementById("item");
var aItem = item.getElementsByTagName("li");
function slide(){
index++;
show()
}
//显示当前，隐藏其他
function show(){
if(index>=aItem.length){
index=0;
}
for(var i = 0; i<aItem.length; i++){
aItem[i].style.display = "none"
}
aItem[index].style.display = "block"
}
timer = setInterval(slide,2000);
focus.onmouseover = function(){
clearInterval(timer)
}
focus.onmouseout = function(){
timer = setInterval(slide,2000);
}
</script>
</body>
