实现简易京东banner图，上下页切换，圆点切换制作，圆点缩略图制作，圆点缩略图切换，点击圆点及缩略图时同时切换banner/页码备注文字等。
技术：导航栏及圆点制作，绑定事件，for循环，数组，三目运算符，自定义索引，定时器，绑定事件中this上下文指向。
1.html结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东简易幻灯片</title>
<style>
body,ul,li,a,div { margin:0; padding:0; }
ul,li { list-style: none ;}
a { cursor: pointer; text-decoration: none; }
img { vertical-align: top; }
.banner_bg { width:1000px; height:800px; background: url('img/bg.jpg') no-repeat; margin: 0 auto; position: relative;}
.banner { width: 536px; height: 356px; position: absolute; top: 168px; left: 296px; }
ul li { display: none; }
ul .active { display: block; }
.prev,.next { width:25px; height:46px; display: block; background: url('img/ar.png') no-repeat;}
.prev { position: absolute; top: 154px; left: 12px; }
.next {
position: absolute; top: 154px; right: 12px;
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */
}
.remark { width: 532px; height: 70px; line-height: 70px; position: absolute; top: 544px; left: 296px; text-align: center; color: #666666; font-size: 20px; }
/* 通过宽高，margin，border,overflow:hidden隐藏border以外的内容及圆角处理导航栏圆点（和三角形图标一样） */
nav { position: absolute; left: 0; bottom: 10px; text-align: center; width: 100%; }
nav a { display: inline-block; width: 10px; height: 10px; margin: 0 3px; background: #fff; border-radius: 50%; position: relative; }
nav img { position: absolute; top: -36px; left: -18px; margin: 0 3px; width: 40px; display: none; /*opacity: 0;*/ border: 2px solid #fff; }
nav .active { background: #ff6600; }
</style>
</head>
<body>
<div class="banner_bg">
<div class="banner">
<ul>
<li class="active"><img src="img/img1.jpg" alt=""></li>
<li><img src="img/img2.jpg" alt=""></li>
<li><img src="img/img3.jpg" alt=""></li>
<li><img src="img/img4.jpg" alt=""></li>
<li><img src="img/img5.jpg" alt=""></li>
</ul>
<span class="prev"></span>
<span class="next"></span>
<nav>
<a href="#" class="active"><img src="img/img1.jpg" alt=""></a>
<a href="#"><img src="img/img2.jpg" alt=""></a>
<a href="#"><img src="img/img3.jpg" alt=""></a>
<a href="#"><img src="img/img4.jpg" alt=""></a>
<a href="#"><img src="img/img5.jpg" alt=""></a>
</nav>
</div>
<div class="mark">时尚潮流先锋——做最好的自己</div>
</div>
</body>
</html>2.通过num++实现上下页切换
<script>
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var imgPath = document.querySelector(".active img");
var num = 1;
next.onclick = function(){
console.info(imgPath);
num++;
if(num>5){
num = 1;
}
imgPath.src = "img/img" + num + ".jpg";
};
prev.onclick = function(){
console.info(imgPath);
num--;
if(num<1){
num = 5;
}
imgPath.src = "img/img" + num + ".jpg";
};
</script>3.通过数组实现banner上下页切换
<script>
//将banner图放进数组
var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
//将文字说明放进数组
var markArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var imgPath = document.querySelector(".active img");
var num = 0 ;
next.onclick = function(){
num++;
// if(num>4){
// num = 0;
// }
num = num>bannersArr.length-1?0:num;
imgPath.src = bannersArr[num];
console.info(imgPath.src);
};
prev.onclick = function(){
num--;
// if(num<0){
// num = bannersArr.length-1;
// }
num = num<0?bannersArr.length-1:num;
imgPath.src = bannersArr[num];
console.info(imgPath.src);
};
</script>4.修改页码备注
<script>
//将banner图放进数组
var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
//将文字说明放进数组
var markArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var imgPath = document.querySelector(".active img");
var num = 0 ;
next.onclick = function(){
num++;
// if(num>4){
// num = 0;
// }
num = num>bannersArr.length-1?0:num;
imgPath.src = bannersArr[num];
console.info(imgPath.src);
};
prev.onclick = function(){
num--;
// if(num<0){
// num = bannersArr.length-1;
// }
num = num<0?bannersArr.length-1:num;
imgPath.src = bannersArr[num];
console.info(imgPath.src);
};
</script>5.实现banner上下页切换同时圆点同时变化
<script>
//将banner图放进数组
var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
//将文字说明放进数组
var remarkArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var imgPath = document.querySelector(".active img");
var remark = document.querySelector(".remark");
//需要获取到全部的a标签
var navs = document.querySelectorAll("nav a");
var num = 0 ;
next.onclick = function(){
//在切换到下一张前先清除当前banner的active样式
// navs[num].className = "";
num++;
num = num>bannersArr.length-1?0:num;
imgPath.src = bannersArr[num];
remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
//for循环的方式暴力清除全部banner的active样式
for (var i = 0; i < navs.length; i++) {
navs[i].className = "";
}
//nav导航栏圆点切换（将当前的banner圆点样式改为active）
navs[num].className = "active";
console.info(navs[num]);
};
prev.onclick = function(){
//在切换到下一张前先清除当前banner的active样式
// navs[num].className = "";
num--;
num = num<0?bannersArr.length-1:num;
imgPath.src = bannersArr[num];
remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
//for循环的方式暴力清除全部banner的active样式
for (var i = 0; i < navs.length; i++) {
navs[i].className = "";
}
//nav导航栏圆点切换（将当前的banner圆点样式改为active）
navs[num].className = "active";
};
</script>6.鼠标移入圆点时，显示缩略图
<script>
//将banner图放进数组
var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
//将文字说明放进数组
var remarkArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var imgPath = document.querySelector(".active img");
var remark = document.querySelector(".remark");
//需要获取到全部的a标签
var navs = document.querySelectorAll("nav a");
// var navImg = document.querySelectorAll("nav img");
var num = 0 ;
next.onclick = function(){
//在切换到下一张前先清除当前banner的active样式
navs[num].className = "";
num++;
num = num>bannersArr.length-1?0:num;
imgPath.src = bannersArr[num];
remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
//for循环的方式暴力清除全部banner的active样式
// for (var i = 0; i < navs.length; i++) {
// navs[i].className = "";
// }
//nav导航栏圆点切换（将当前的banner圆点样式改为active）
navs[num].className = "active";
console.info(navs[num]);
};
prev.onclick = function(){
//在切换到下一张前先清除当前banner的active样式
navs[num].className = "";
num--;
num = num<0?bannersArr.length-1:num;
imgPath.src = bannersArr[num];
remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
//for循环的方式暴力清除全部banner的active样式
// for (var i = 0; i < navs.length; i++) {
// navs[i].className = "";
// }
//nav导航栏圆点切换（将当前的banner圆点样式改为active）
navs[num].className = "active";
};
//实现鼠标移入移出显示banner缩略图
//navs是类数组（querySelectorAll获取到的是一组元素），不能直接操作一组元素，因此使用for循环进行操作
for(var i=0;i<navs.length;i++){
navs[i].onmouseover = function(){
//for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以不能在for循环的事件函数中获取一组元素的值
//需要通过this上下文环境（在事件函数中，谁调用就指向触发当前函数的元素）,所以通过this就可以在循环里获取每个a标签
var navImg = this.querySelector("img");
navImg.style.display = "block";
};
navs[i].onmouseout = function(){
//for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以不能在for循环的事件函数中获取一组元素的值
//需要通过this上下文环境（在事件函数中，谁调用就指向触发当前函数的元素）,所以通过this就可以在循环里获取每个a标签
var navImg = this.querySelector("img");
navImg.style.display = "none";
};
}
</script>7.可点击圆点且可点击缩略图进行切换banner图，页码，文字备注，圆点active
<script>
//将banner图放进数组
var bannersArr = ["img/img4.jpg","img/img3.jpg","img/img1.jpg","img/img5.jpg","img/img2.jpg"];
//将文字说明放进数组
var remarkArr = ["时尚潮流先锋——做最好的自己","未来属于我们——只要有你","JavaScript高级工程师——你值得拥有","生命在于静止","畅想未来——有你有我有大家"];
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
var imgPath = document.querySelector(".active img");
var remark = document.querySelector(".remark");
//需要获取到全部的a标签
var navs = document.querySelectorAll("nav a");
var navImg = document.querySelectorAll("nav img");
//页面第一次刷新时banner图片，导航缩略图片和文字为数组第一个内容
imgPath.src = bannersArr[0];
navImg.src = bannersArr[0];
remark.innerHTML = remarkArr[0] + " 第1页" ;
var num = 0 ;
next.onclick = function(){
//在切换到下一张前先清除当前banner的active样式
navs[num].className = "";
num++;
num = num>bannersArr.length-1?0:num;
imgPath.src = bannersArr[num];
remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
//for循环的方式暴力清除全部banner的active样式
// for (var i = 0; i < navs.length; i++) {
// navs[i].className = "";
// }
//nav导航栏圆点切换（将当前的banner圆点样式改为active）
navs[num].className = "active";
};
prev.onclick = function(){
//在切换到下一张前先清除当前banner的active样式
navs[num].className = "";
num--;
num = num<0?bannersArr.length-1:num;
imgPath.src = bannersArr[num];
remark.innerHTML = remarkArr[num] + " 第"+ (num+1) +"页";
//for循环的方式暴力清除全部banner的active样式
// for (var i = 0; i < navs.length; i++) {
// navs[i].className = "";
// }
//nav导航栏圆点切换（将当前的banner圆点样式改为active）
navs[num].className = "active";
};
//实现鼠标移入移出显示banner缩略图
//navs是类数组（querySelectorAll获取到的是一组元素），不能直接操作一组元素，因此使用for循环进行操作
for(var i=0;i<navs.length;i++){
navs[i].index = i; // 为第i个a元素添加一个index属性，赋值为i
navs[i].onmouseover = function(){
//for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以不能在for循环的事件函数中获取一组元素的值
//需要通过this上下文环境（在事件函数中，谁调用就指向触发当前函数的元素）,所以通过this就可以在循环里获取每个a标签
var navImg = this.querySelector("img");
navImg.src = bannersArr[this.index];
navImg.style.display = "block";
// navImg.style.opacity = "1";
};
navs[i].onmouseout = function(){
//for循环中的代码是在页面一加载就进行解析的，而onmouseover等事件函数是在有事件行为时才执行，所以不能在for循环的事件函数中获取一组元素的值
//需要通过this上下文环境（在事件函数中，谁调用就指向触发当前函数的元素）,所以通过this就可以在循环里获取每个a标签
var navImg = this.querySelector("img");
window.setTimeout(function(){
navImg.style.display = "none";
},1000);
//navImg.style.display = "none";
// navImg.style.opacity = "0";
};
navs[i].onclick = function(){
//将所有a标签的样式进行暴力清除
for(var j=0;j<navs.length;j++){
navs[j].className = "";
}
//将当前的a标签的样式设置为active
this.className = "active";
//将文字更改为对应页文字
console.info(this.index);
imgPath.src = bannersArr[this.index];
remark.innerHTML = remarkArr[this.index] + " 第"+ (this.index+1) +"页";
num = this.index;//必须将此处的index再赋值为num，才能再点击按钮后再次按上下一页时不出错
};
}
</script>