当前位置：首页 > news >正文

《实现 HTML 图片轮播效果》

news 来源：原创 2024/9/22 9:30:03

（一）HTML 结构

（二）CSS 样式

（三）JavaScript 实现轮播逻辑

一、轮播效果的重要性与应用场景

在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。

二、HTML 轮播效果的实现分析

以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。

（一）HTML 结构

<div class="container"><ul class="img_box"><li><img src="img/20210714013959_50691.jpg" alt=""></li><li><img src="img/20210218182831_891c5.jpg" alt=""></li><li><img src="img/20210201171230_53725.jpg" alt=""></li></ul>
</div>

在 HTML 部分，我们创建了一个包含图片列表的容器，这是轮播图的基本结构。

（二）CSS 样式

* {padding: 0;margin: 0;
}
img {width: 100px;
}
.container {width: 800px;height: 350px;background: red;margin: 100px auto;overflow: hidden;position: relative;
}
.container.btns {position: absolute;width: 90%;left: 5%;top: 150px;display: flex;justify-content: space - between;
}
.container.btns li {list - style: none;width: 50px;height: 50px;border - radius: 25px;text - align: center;line - height: 50px;background: rgba(0, 0, 0, 0.3);cursor: pointer;color: white;
}
.container.btns li:hover {background: rgba(0, 0, 0, 0.4);
}
.container.img_box {width: 4000px;height: 350px;background: pink;display: flex;position: absolute;left: - 800px;/* transition: left 1s linear; */
}
.container.img_box li {width: 800px;height: 350px;list - style: none;
}
.container.img_box li img {width: 100%;height: 100%;object - fit: contain;
}
.dotts {position: absolute;/* background: red; */width: 100%;bottom: 10px;display: flex;justify - content: center;
}
.dotts li {list - style: none;background: rgba(255, 255, 255, 0.4);margin: 5px;padding: 4px 6px;font - size: 12px;cursor: pointer;border: 2px dashed rgb(239, 19, 169);border - radius: 60px;
}
.dotts li.current {color: white;background: black;
}

CSS 样式主要用于定义轮播图的外观，包括容器的大小、图片的尺寸、切换按钮和指示点的样式等。通过设置overflow: hidden来隐藏超出容器范围的图片，从而实现轮播效果。

（三）JavaScript 实现轮播逻辑

window.onload = function () {// 获取轮播容器 containervar container = document.querySelector(".container");var img_box = document.querySelector(".container.img_box");img_box.style.left = "-800px";// 轮播核心代码var change = function (offset) {// 获取图片切换的目标位置var newoffset = parseInt(img_box.style.left) + offset;var speed = offset / 100;var move = function () {img_box.style.left = parseInt(img_box.style.left) + speed + "px";if (parseInt(img_box.style.left)!= newoffset) {setTimeout(move, 10);} else {if (parseInt(img_box.style.left) == -3200) {img_box.style.left = "-800px";} else if (parseInt(img_box.style.left) == 0) {img_box.style.left = "-2400px";}}};move();};// 生成左右切换的按钮var ul = document.createElement("ul");ul.className = "btns";var left_li = document.createElement("li");left_li.innerHTML = "<";var right_li = document.createElement("li");right_li.innerHTML = ">";ul.appendChild(left_li);ul.appendChild(right_li);container.appendChild(ul);// 绑定事件left_li.onclick = function () {change(800);index--;if (index < 0) {index = 2;}highlight();};right_li.onclick = function () {change(-800);index++;if (index > 2) {index = 0;}highlight();};// 自动轮播var timer = setInterval(right_li.onclick, 4000);// 解决冲突问题container.onmouseenter = function () {clearInterval(timer);};container.onmouseleave = function () {timer = setInterval(right_li.onclick, 4000);};// 生成任意切换的按钮var dott_ul = document.createElement("ul");dott_ul.className = "dotts";// 获取有几个图片var img_box_li = document.querySelectorAll(".img_box li");for (var i = 0; i < img_box_li.length; i++) {var li = document.createElement("li");li.innerHTML = i + 1;if (i == 0) {li.className = "current";}dott_ul.append(li);}container.append(dott_ul);// 任意切换var dott_ul_li = document.querySelectorAll(".dotts li");for (var i = 0; i < dott_ul_li.length; i++) {dott_ul_li[i].onclick = function () {// 图片切换var new_index = this.innerText - 1;change((index - new_index) * 800);// 效果切换index = new_index;highlight();};}// 定义一个游标 记录当前点点的索引值var index = 0;// 按钮样式切换代码var highlight = function () {for (var k = 0; k < dott_ul_li.length; k++) {if (k == index) {dott_ul_li[k].className = "current";} else {dott_ul_li[k].className = "";}}};// 初始化辅助无缝轮播的图片var last_li = img_box.firstElementChild.cloneNode(true);var first_li = img_box.lastElementChild.cloneNode(true);img_box.insertBefore(first_li, img_box.firstElementChild);img_box.appendChild(last_li);
};

JavaScript 代码实现了轮播的核心逻辑，包括左右按钮点击切换图片、自动轮播、鼠标移入移出暂停和恢复自动轮播、点击指示点切换图片以及样式切换等功能。其中，通过改变图片容器的left值来实现图片的切换，并且利用克隆第一张和最后一张图片实现无缝轮播的效果。

通过这个 HTML 图片轮播的例子，我们可以看到，结合 HTML、CSS 和 JavaScript 可以实现丰富的网页交互效果。