标题JS 轮播图 图片切换（定时器）
这次的轮播图与上次的图片切换相比，仅仅是加上了定时器，使其可以自动切换。
上次的图片切换的链接：/qq_38318589/article/details/99050117
此次全部的代码都在下面，有注释，并有效果图如下：
<!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>.picture {position: relative;width: 500px;height: 333px;margin: 0 auto;border: 2px solid rgb(231, 127, 217);overflow: hidden;}.radius {/* 圆点所在的p (容器) */width: 100%;height: 10px;position: absolute;bottom: 30px;text-align: center;}.pg {position: absolute;margin: 0;width: 100%;height: 20px;background-color: rgba(0, 0, 0, .4);text-align: center;font-size: 16px;font-weight: 600;color: #fff;}.title {position: absolute;width: 100%;bottom: 0px;text-align: center;font-size: 16px;font-weight: 600;color: rgb(21, 223, 72);}span {display: inline-block;border: 10px solid #fdfdfd;border-radius: 50%;}.active {border: 10px solid #656466;}/* 左右箭头 */.arrowhead-left,.arrowhead-right {position: absolute;width: 41px;height: 69px;font-size: 30px;line-height: 70px;text-align: center;color: #D6D8D4;background-color: rgba(0,0,0,.3);}.arrowhead-left {left: 0;top: 40%;}.arrowhead-right {right: 0;top: 40%;}</style></head><body><div class="picture"><!-- 图片页码 --><p class="pg">这里展示页码</p><img src="./image/d8.jpeg" alt=""><!-- 小圆点点 --><p class="radius"></p><!-- 图片的下面标题 --><p class="title">标题</p><!-- 左右箭头 --><div class="arrowhead-left" id="al"> < </div> <div class="arrowhead-right" id="ar"> > </div></div><script>var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];// var imgs = document.getElementsByTagName("img");var imgs = document.querySelector("img");var len = address.length;//图片地址的数量为lenvar str = "";var pp = document.getElementsByTagName("p");//获取的是p标签的集合// var pp = document.querySelector("p"); //获取的是一个元素var al = document.getElementById("al");var ar = document.getElementById("ar");var n = 0 ;//添加span标签（小圆点），个数为len个for (i = 0; i < len; i++) {str += ' <span></span>'}pp[1].innerHTML = str;var spans = pp[1].getElementsByTagName('span'); //获取p[1]里所有span标签spans[0].className = 'active'; //给第一个span标签添加样式 activefor (i = 0; i < len; i++) {spans[i].index = i; //自定义索引值spans[i].onmouseover = function () {//鼠标指向圆点时的事件for (i = 0; i < len; i++) {spans[i].className = "";//通过循环，清除所有圆点的类名}n=this.index ;this.className = 'active'; //给鼠标移入的圆点添加类名imgs.src = address[this.index];pp[0].innerHTML = [this.index + 1] + "/6"; pp[2].innerHTML = "风光" + [this.index + 1];}}ar.onclick = function () {//右侧箭头，点击一次图片向右换一张n++;if (n>5) {n=0; } for (i = 0; i < len; i++) {spans[i].className = "";}spans[n].className = "active";imgs.src = address[n];pp[0].innerHTML = (n+1) + "/6";pp[2].innerHTML = "风光" +(n+1);}al.onclick = function () {// //左侧箭头，点击一次图片向左换一张n--;if (n<0) {n=(len-1);}for (i = 0; i < len; i++) {spans[i].className = "";} spans[n].className = "active";imgs.src = address[n];pp[0].innerHTML = (n+1) + "/6";pp[2].innerHTML = "风光" +(n+1);} setInterval(ar.onclick,3000); //添加定时器 setInterval（函数，间隔时间单位为毫秒）//此次添加的函数为点击右侧箭头，间隔为3秒</script></body></html>
与上次相比，仅仅添加了一句 setInterval(ar.onclick,3000);
setInterval（函数，间隔时间单位为毫秒）
ar.onclick是点击右侧箭头的函数，3000是3000毫秒，既3秒。
（请忽略图片上的水印，随便找的一个做动图的软件，带水印-_-！）
