目录
[(一)HTML 结构](#(一)HTML 结构)
[(二)CSS 样式](#(二)CSS 样式)
[(三)JavaScript 实现轮播逻辑](#(三)JavaScript 实现轮播逻辑)
一、轮播效果的重要性与应用场景
在网页设计中,轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告,能够有效地吸引用户的注意力,提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。
二、HTML 轮播效果的实现分析
以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
(一)HTML 结构
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 样式
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 实现轮播逻辑
javascript
window.onload = function () {
// 获取轮播容器 container
var 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 可以实现丰富的网页交互效果。