实现简易京东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属性，赋值为inavs[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标签的样式设置为activethis.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>