<!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++) {
//为每个节点对象添加onmouseover事件 lis[i].onmouseover = function () { //2)停止图片轮播 window.clearInterval(taskid); //3)显示指向图片
//this表示鼠标所指的节点对象 changePic(this.innerText - 1); } //4.鼠标移开，继续轮播 //为每个对象节点添加onmouseout事件
lis[i].onmouseout = function(){ taskid = window.setInterval(changePic, 2000); } } } </script> </body> </html>
11