企业邮箱使用方法_中国移动生活app下载安装_百度推广个人能开户吗_即时热榜

这段代码实现了一个具有自动轮播、手动切换功能的图片轮播图，并且配有指示器（小圆点）来显示当前图片位置。轮播图可通过左右箭头按钮进行手动切换，也能自动定时切换，当鼠标悬停在轮播图上时，自动轮播会暂停，鼠标移开后继续。

代码详细分析

1. HTML 部分

<div class="box"><div class="wipper"><div><img src="../png/NTE_features1.jpg" alt="都市特色1" /></div><div><img src="../png/NTE_features2.jpg" alt="都市特色2" /></div><div><img src="../png/NTE_features3.jpg" alt="都市特色3" /></div><div><img src="../png/NTE_features4.jpg" alt="都市特色4" /></div><div><img src="../png/NTE_features5.jpg" alt="都市特色5" /></div><div><img src="../png/NTE_features6.jpg" alt="都市特色6" /></div><div><img src="../png/NTE_features1.jpg" alt="都市特色1" /></div></div>
</div>
<div class="pre"></div>
<div class="next"></div>
<div class="lis"><span class="current"></span><span class="current"></span><span class="current"></span><span class="current"></span><span class="current"></span><span class="current"></span>
</div>

.box 容器：作为轮播图的整体容器，用于包裹图片和控制溢出内容。
.wipper 容器：用来包含所有图片，通过改变其 transform 属性实现图片的滚动。
图片元素：每个 <div> 中包含一张图片，为了实现无缝循环，最后一张图片重复第一张。
.pre 和 .next 按钮：分别作为上一张和下一张的切换按钮。
.lis 指示器：包含多个 <span> 元素，用于指示当前显示的图片位置。

2. CSS 部分

.box {width: 1120px;height: 530px;margin: 0px auto;margin-top: -60px;overflow: hidden;position: relative;border: 9px solid #585858;
}.wipper {width: 8400px;height: 530px;position: absolute;left: 0;
}.wipper div {width: 1200px;height: 650px;float: left;text-align: center;
}.wipper div img {width: 100%;height: 100%;object-fit: cover;
}.lis {text-align: center;border-radius: 5px;position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);
}.lis span {display: inline-block;width: 12px;height: 12px;border-radius: 50%;background-color: #fff;margin: 0 5px;cursor: pointer;
}.lis span.current {background-color: #e8e8e8;
}

.box 样式：设置轮播图容器的宽度、高度、边距、溢出处理和边框样式。
.wipper 样式：设置图片容器的宽度和高度，并将其定位为绝对定位，方便移动。
.wipper div 样式：设置每个图片容器的宽度、高度和浮动方式，使其水平排列。
.wipper div img 样式：设置图片的宽度、高度和填充方式，确保图片填满容器。
.lis 样式：设置指示器的位置和样式。
.lis span 样式：设置每个指示器小圆点的样式，包括大小、颜色和鼠标指针样式。
.lis span.current 样式：设置当前激活的指示器小圆点的样式。

3. JavaScript 部分

// 获取元素
var box = document.getElementsByClassName("box")[0];
var wipper = document.getElementsByClassName("wipper")[0];
var divs = wipper.getElementsByTagName("div");
var pre = document.getElementsByClassName("pre")[0];
var next = document.getElementsByClassName("next")[0];
var lis = document.getElementsByClassName("lis")[0];
var spans = lis.getElementsByTagName("span");// 定义一个 index 保存当前图片索引
var index = 0;// 下一张按钮点击事件
function nextClick() {index++;wipper.style.transition = "all .5s";wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";if (index == divs.length - 1) {index = 0;setTimeout(() => {wipper.style.transform = "translate(0,0)";wipper.style.transition = "none";}, 300);}for (var i = 0; i < spans.length; i++) {spans[i].className = "";spans[index].className = "current";}
}
next.onclick = nextClick;// 上一张
function preClick() {index--;if (index == -1) {wipper.style.transform = "translateX(" + -5 * divs[0].offsetWidth + "px)";wipper.style.transition = "none";index = 4;setTimeout(() => {wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";wipper.style.transition = "all .5s";}, 0);} else {wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";wipper.style.transition = "all .5s";}for (var i = 0; i < spans.length; i++) {spans[i].className = "";spans[index].className = "current";}
}
pre.onclick = preClick;// 自动轮播
var timer = setInterval(nextClick, 3000);// 小圆点的点击事件
for (var i = 0; i < spans.length; i++) {(function (i) {spans[i].onclick = function () {var allSpans = this.parentNode.children;for (var j = 0; j < allSpans.length; j++) {allSpans[j].className = "";}this.className = "current";index = i;wipper.style.transform = "translateX(" + -index * divs[0].offsetWidth + "px)";wipper.style.transition = "all .5s";};})(i);
}// 移入 box，清除定时器
box.onmouseenter = function () {clearInterval(timer);
};
// 移出 box，重新调用定时器
box.onmouseleave = function () {timer = setInterval(nextClick, 3000);
};

获取元素：通过 document.getElementsByClassName 和 document.getElementsByTagName 方法获取所需的 HTML 元素。
定义 index 变量：用于保存当前显示的图片索引。
nextClick 函数：处理下一张按钮的点击事件，增加 index 值，通过改变 wipper 的 transform 属性实现图片切换。当到达最后一张图片时，使用 setTimeout 函数实现无缝循环。同时更新指示器的样式。
preClick 函数：处理上一张按钮的点击事件，减少 index 值，处理到达第一张图片的情况，同样更新指示器的样式。
自动轮播：使用 setInterval 函数定时调用 nextClick 函数，实现自动轮播。
小圆点点击事件：为每个指示器小圆点添加点击事件，点击时更新 index 值和指示器样式，并切换到相应的图片。
鼠标悬停处理：当鼠标移入轮播图时，清除定时器，暂停自动轮播；鼠标移出时，重新启动定时器。

总结

这段代码通过 HTML 构建轮播图的结构，CSS 设置样式，JavaScript 实现交互功能，包括手动切换、自动轮播和指示器更新。整体实现了一个功能完善、用户体验良好的图片轮播图。

效果如图