<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
position: relative;
751px;
height: 455px;
}
.container .pic {
position: absolute;
left: 0px;
top: 0px;
}
.slider-nav {
bottom: 10px;
height: 9px;
position: absolute;
}
.slider-nav ul {
line-height: 1;
}
.slider-nav li {
background: #3e3e3e none repeat scroll 0 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: inline-block;
height: 9px;
margin: 0 2px;
overflow: hidden;
text-align: center;
9px;
}
.slider-nav .slider-selected {
background: #b61b1f none repeat scroll 0 0;
color: #fff;
}
.slider-nav {
height: 0;
left: 110px;
line-height: 0;
text-align: center;
top: 290px;
530px;
font-size: 12px;
}
.slider-nav li {
display: inline-block;
height: 18px;
line-height: 18px;
18px;
}
.slider-extra {
position: absolute;
z-index: 1000;
}
</style>
</head>
<body>
<!--
需求
1.模仿京东做图片轮播
-->
<div class="container">
<div id="allpic">
<div class="pic" style="z-index: 5"><img src="img/1.jpg"></div>
<div class="pic" style="z-index: 4"><img src="img/2.jpg"></div>
<div class="pic" style="z-index: 3"><img src="img/3.jpg"></div>
<div class="pic" style="z-index: 2"><img src="img/4.jpg"></div>
<div class="pic" style="z-index: 1"><img src="img/5.jpg"></div>
</div>
<div class="slider-extra">
<ul class="slider-nav" id="ulid">
<li class="slider-selected">1</li>
<!-- slider-selected 表示当前选中的颜色-->
<li class="slider-item">2</li>
<li class="slider-item">3</li>
<li class="slider-item">4</li>
<li class="slider-item">5</li>
</ul>
</div>
</div>
<script type="application/javascript">
//code here
//1.图片轮播
var currPic = 0;
var taskid = 0;
var allpic = document.getElementById("allpic");
var pics = getNodeTypeEq1(allpic);
//2.数字跟着图片变化
var lis = getNodeTypeEq1(document.getElementById("ulid"));
//显示一张图片
function changePic(pointAt) {
if(pointAt != null){
currPic = pointAt;
}
for (var i = 0; i < pics.length; i++) {
if (currPic == i) {
pics[i].style.zIndex = 1;
lis[i].className = "slider-selected";
} else {
pics[i].style.zIndex = 0;
lis[i].className = "slider-item";
}
}
currPic++;
if (currPic == 5) {
currPic = 0;
}
}
//每隔两秒，变换一次图片
taskid = window.setInterval(changePic, 2000)
//过滤掉文本结点、属性结点
function getNodeTypeEq1(fatherNodeList) {
var container = [];
var fnl = fatherNodeList.childNodes;
for (var i = 0; i < fnl.length; i++) {
//结点的nodeType表示结点的类型：1为元素结点 2为属性结点 3为文本结点
if (fnl[i].nodeType == 1) {
container.push(fnl[i]);
}
}
return container;
}
//3.指向下标以显示图片
//1)页面加载完成，给所有li绑定事件
window.onload = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
//2)停止图片轮播
window.clearInterval(taskid);
//3)显示指向图片
changePic(this.innerText - 1);
}
//4.鼠标移开，继续轮播
lis[i].onmouseout = function(){
taskid = window.setInterval(changePic, 2000);
}
}
}
</script>
</body>
</html>