阿里云智能建站,报ui设计班,wordpress考试系统插件,松岗怎么做企业网站设计使用 HTML、CSS 和 JavaScript 创建轮播图
在本文中#xff0c;我们将讨论如何使用 HTML、CSS 和 JavaScript 构建轮播图。我们将演示两种不同的创建滑块的方法#xff0c;一种是基于opacity的滑块#xff0c;另一种是基于transform的。
创建 HTML
我们首先从 HTML 代码开…使用 HTML、CSS 和 JavaScript 创建轮播图
在本文中我们将讨论如何使用 HTML、CSS 和 JavaScript 构建轮播图。我们将演示两种不同的创建滑块的方法一种是基于opacity的滑块另一种是基于transform的。
创建 HTML
我们首先从 HTML 代码开始
div classsliderdiv classslideimg srcimages/1.jpg altdemo image //divdiv classslideimg srcimages/2.jpg altdemo image //div. . .a classprev onclickprevSlide()lt;/aa classnext onclicknextSlide()gt;/a
/div.slider元素充当整个图像滑块的容器。 单独的幻灯片.slide元素与图像一起封装在容器中。 滑块导航由.prev、.next两个按钮元素控制。
我们还为导航设置了onclick事件监听器当点击它们时相应的 JavaScript 函数将被激活。
添加样式
为了更轻松地设置元素样式建议删除所有元素的默认内边距和边距并将其box-sizing属性设置为border-box。这允许根据元素的尺寸border-box而不是content-box来调整元素的大小。
* {padding: 0px;margin: 0px;box-sizing: border-box;
}然后添加.slider样式。
.slider {width: 500px;height: 300px;margin: auto;overflow: hidden;transform: translateY(50%);
}以及.slide。
.slide {position: absolute;top: 50%;transform: translateY(-50%);
}img {width: 100%;height: auto;
}最后我们还将导航按钮放置在.slider容器的左侧和右侧。
.prev,
.next {cursor: pointer;background-color: #333;color: #fff;padding: 10px 20px;position: absolute;top: 50%;transform: translateY(-50%);text-decoration: none;
}.prev {left: 0;
}.next {right: 0;
}添加 JavaScript 代码
现在让我们仔细看看.slide样式。
.slide {position: absolute;top: 50%;transform: translateY(-50%);
}通过使用position: absolute我们将所有.slide元素放置在一个位置彼此堆叠。我们可以使用浏览器中的开发人员工具进行验证。 基于opacity的滑块
现在我们需要做的就是将当前幻灯片的opacity设为100同时将所有其他幻灯片的opacity设为0。
为了实现幻灯片效果我们可以编写 JavaScript 代码以便每当单击导航链接时“当前幻灯片”都会相应调整。
我们首先将所有幻灯片的opacity设置0。
.slide {position: absolute;top: 50%;transform: translateY(-50%);opacity: 0;transition: opacity 1s ease;
}然后添加以下 JavaScript 代码。
const slides document.querySelectorAll(.slide);
let currentSlide 0;function showSlide(index) {slides.forEach((slide, i) {if (i index) {slide.style.opacity 100;} else {slide.style.opacity 0;}});
}function nextSlide() {currentSlide (currentSlide 1) % slides.length;showSlide(currentSlide);
}function prevSlide() {currentSlide (currentSlide - 1 slides.length) % slides.length;showSlide(currentSlide);
}showSlide(currentSlide);第 1 行选择所有.slide并将它们分配给变量slides。
第 2 行将变量初始化currentSlide为0它指向图像滑块中的第一张幻灯片。
现在我们来看看nextSlide()函数。
function nextSlide() {currentSlide (currentSlide 1) % slides.length;showSlide(currentSlide);
}在本例中slides.length给出了滑块中幻灯片的总数当执行此函数通过单击链接.next时currentSlide将进行相应调整。
例如当函数第一次执行时假设总共有 5 张幻灯片
currentSlide (0 1) % 5 1但当执行第五次时currentSlide将重置回0。
currentSlide (4 1) % 5 0prevSlide()函数的工作原理类似。
function prevSlide() {currentSlide (currentSlide - 1 slides.length) % slides.length;showSlide(currentSlide);
}当currentSlide是4时它指向第五张幻灯片
currentSlide (4 - 1 5) % 5 3当currentSlide是0时它指向第一张幻灯片
currentSlide (0 - 1 5) % 5 4然后变量currentSlide将作为showSlide()的参数index
function showSlide(index) {slides.forEach((slide, i) {if (i index) {slide.style.opacity 100;} else {slide.style.opacity 0;}});
}此函数迭代存储在slides中的所有幻灯片如果迭代索引 ( i) 与currentSlide索引 ( index) 匹配则该幻灯片将被设置opacity为100。如果没有那opacity就是0。
基于transform
我们将其称为图像滑块但从最终结果中可以看到没有太多滑动因为过渡是基于不透明度的。我们如何调整代码以便当单击导航链接时图像实际上滑到下一个
我们必须进行两项更改。首先.slide 必须水平排列在.slider容器后面而不是相互堆叠。我们可以将.slider容器视为一个窗口。每次单击链接时.slide 都会向左或向右移动以显示上一张或下一张图像。
.slider {width: 500px;height: 300px;margin: auto;overflow: hidden;transform: translateY(50%);display: flex;align-items: center;
}.slide {flex: 0 0 100%;transition: transform 1s ease;
}我们使用弹性布局来实现这种效果。flex: 0 0 100%将每个slide的宽度设置为100%。
接下来调整showSlide()功能。
function showSlide(index) {slides.forEach((slide, i) {const slideWidth slide.clientWidth;slide.style.transform translateX(-${index * slideWidth}px);});
}再次假设总共有五张幻灯片并且每张幻灯片都是500px宽。当索引为3时index * slideWidth将是1500并将translateX(-1500px)所有.slide 向左移动1500像素显示第四个图像。
