javascript初学者通常会做到轮播图练习，本篇文章用到的要素不多。

首先我们来看效果图

讯享网

通过这张效果图可以看到本次轮播图主要由是由点击响应函数构成。

 一、body排版阶段

 <div class="boxbox"> <div class="box"> <img src="轮播1.webp" alt="" class="imgg"> </div> <div class="box1"> <span class="preceding"> < </span> <span class="next"> > </span> </div> <div class="box2"> <ul class="lis"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <p></p> </div>

排版效果

二、style样式

讯享网<style> * { padding: 0; margin: 0; } .boxbox { width: 500px; height: 4200px; margin: 100px auto; position: relative; } .box { width: 500px; height: 400px; } img { width: 500px; height: 400px; } .box1 { width: 200px; background-color: pink; } .preceding, .next { border: none; cursor: pointer; color: #777; } .preceding { position: absolute; top: 200px; font-size: 30px; } .next { position: absolute; top: 200px; right: 0; font-size: 30px; } p { height: 20px; text-align: center; } .box2 { position: absolute; top: 380px; } .box2>ul { margin-left: 20px; } .box2>ul>li { list-style: none; width: 8px; height: 8px; background-color: #888; border-radius: 50%; color: rgb(173, 165, 165); float: left; margin-right: 5px; font-size: 5px; text-align: center; box-shadow: 0px 0px 0px 2px rgba(239, 223, 223, 0.48); } .nav { width: 100%; height: 40px; background-color: pink; position: fixed; display: none; left: 0; top: 0; z-index: 999; } </style>

（当前效果）

以上静态网页初步排成功。

接下来就是如何在script里操作静态网页代码

首先我们需要获取每一个需要操作的节点，并将要轮播的图片放进一个数组里，方便我们通过下标索引去遍历它。

var imgArr = ['轮播1.webp', '轮播2.webp', '轮播3.jpg', '轮播4.jpg', '轮播5.webp', '轮播6.jpg', '轮播7.webp', '轮播8.jpg'];

接下来获取节点

讯享网var imgArr = ['轮播1.webp', '轮播2.webp', '轮播3.jpg', '轮播4.jpg', '轮播5.webp', '轮播6.jpg', '轮播7.webp', '轮播8.jpg']; var preceding = document.querySelector('.preceding');//上一张切换 var imgg = document.querySelector('.imgg');//获取图片 var next = document.querySelector('.next');//下一张切换 var index = 0; //创建一个变量，用来保存当前图片的索引。 var p = document.querySelector('p');//获取要编辑内容的p标签 var li = document.querySelectorAll('ul>li');//获取发光的小点

然后遍历每一个li就是想让它变色的小点，并为它绑定单击响应函数，使点击它的时候可以切换到它对应的图片上，且变色。

 for (var i = 0; i < imgArr.length; i++) { } (function (j) { li[j].onclick = function () {//每次循环都创建一个匿名方法，已经给这个匿名方法传了i当时的值 匿名方法里获取到的i就是当时循环的值 而不是循环结束的值 imgg.src = imgArr[j]; p.innerHTML = '一共有' + imgArr.length + '张图片,当前是第' + (j + 1) + '张。'//将此时点击到的图片对应的下标通过数据渲染的方式写进p标签中 for (k = 0; k < imgArr.length; k++) { li[k].style.backgroundColor = '#888'; }//首先写一个循环将每一个li设置为它原本的颜色样式 li[j].style.backgroundColor = '#fff';//点击到的li变成白色。 } })(i)

 操作箭头实现上一张下一张切换图片

讯享网 //切换下一张 next.onclick = function () { index++;//点击时，下标加1 if (index > imgArr.length - 1) { index = 0;//当图片到最后一张时，切换到第一张图 } for (k = 0; k < imgArr.length; k++) { li[k].style.backgroundColor = '#888'; } li[index].style.backgroundColor = '#fff';//和li里设置的方式一样，为了使箭头与li绑定在一起，切换变色变图片。 imgg.src = imgArr[index];//点击后切换到的图片 p.innerHTML = '一共有' + imgArr.length + '张图片,当前是第' + (index + 1) + '张。'//将图片下标写入p标签 }

 //切换上一张 preceding.onclick = function () { index--; if (index < 0) { index = imgArr.length - 1; } for (k = 0; k < imgArr.length; k++) { li[k].style.backgroundColor = '#888'; } li[index].style.backgroundColor = '#fff'; imgg.src = imgArr[index]; p.innerHTML = '一共有' + imgArr.length + '张图片,当前是第' + (index + 1) + '张。' } p.innerHTML = '一共有' + imgArr.length + '张图片为,当前是第' + (index + 1) + '张。'//初始时页面显示的p标签

以上就是京东轮播图的写法，不好的地方请指出，希望采纳，谢谢~