js写图片轮播
最简单版本
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container {
position: relative;
width: 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;
width: 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;
width: 530px;
font-size: 12px;
}
.slider-nav li {
display: inline-block;
height: 18px;
line-height: 18px;
width: 18px;
}
.slider-extra {
position: absolute;
z-index: 1000;
}
.nextPic {
position: absolute;
z-index: 1200;
left: 734px;
top: 130px;
}
.beforePic {
position: absolute;
z-index: 1200;
top: 130px;
}
</style>
</head>
<body>
<div class="container">
<div id="allpic">
<div class="pic" style="z-index: 1"><img src="img/1.jpg"></div>
<div class="pic" style="z-index: 2"><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: 4"><img src="img/4.jpg"></div>
<div class="pic" style="z-index: 5"><img src="img/5.jpg"></div>
</div>
<div class="slider-extra">
<ul class="slider-nav" id="ulid">
<li class="slider-item">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-selected">5</li>
</ul>
</div>
</div>
<script type="application/javascript">
//【1】封装 获取图片父类id、通过父类id得到图片className集合,从而获取包裹图片的框架
function getFatherId(fId) {
var childs = document.getElementById(fId).childNodes;
var jpgFrame = [];
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType == 1){
//得到 <div class="pic" style="z-index: 1"><img src="img/1.jpg"></div>
//未防止一些浏览器算 换行结点,所以把所有框架扣进一个数组
jpgFrame.push(childs[i]);
}
}
return jpgFrame;
}
var pics = getFatherId("allpic");
var lis = getFatherId("ulid");
//【2】设置循环到的图片 的权重
var xId = 0;
var currIndex = 0;//必须在外面
function changeZIndex(num) {
if(num!=null){
currIndex = num;
}
for(var i=0;i<pics.length;i++){
if(i==currIndex){
pics[i].style.zIndex = 100;
lis[i].className = "slider-selected";
}else{
pics[i].style.zIndex = 1;
lis[i].className = "slider-item";
}
}
currIndex++;
if(currIndex==5){
currIndex = 0;
}
}
//【3】页面加载时调用 更改图权重方法
window.onload = function(){
//setInterval设置定时任务,两秒调用一次 更改图权重法
xId = window.setInterval(changeZIndex,1500);
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
//this => <li class="slider-item">i</li>
window.clearInterval(xId);//当前定时循环权重的方法取消
//获取圆点的文本,转成数字做权重循环的i
var num = Number(this.innerText)-1;//循环从0开始
changeZIndex(num);//导入鼠标定位的点对应的图片编号
}
lis[i].onmouseout = function(){
//鼠标离开时调用更改图权重的方法,继续循环,同时把鼠标离开对应的结点ID赋给xId
xId = window.setInterval(changeZIndex,1500);
}
}
}
</script>
</body>
</html>
xId = window.setInterval(changeZIndex,1500);
不能只写window.setInterval(changeZIndex,1500);
如果不把鼠标离开对应图片的结点ID赋给 xId,你把鼠标往其他图片圆点移动
上面**window.clearInterval(xId);**中的xId不知道下一次删除谁,直接跳过。
不信可以试试。