个人网站设计论文ppt,天津网站定制公司,中小型企业网站建设与推广,王业美前言 在网页设计中#xff0c;轮播图#xff08;Carousel#xff09;已经成为一种常见的元素#xff0c;用于展示一系列的图片或内容卡片。它们不仅能够吸引用户的注意力#xff0c;还能节省空间#xff0c;使得用户可以在有限的空间内获得更多的信息。今天#xff0c;我…前言 在网页设计中轮播图Carousel已经成为一种常见的元素用于展示一系列的图片或内容卡片。它们不仅能够吸引用户的注意力还能节省空间使得用户可以在有限的空间内获得更多的信息。今天我们将一起学习如何从零开始用原生JavaScript打造一个简单而美观的轮播图组件。
具体代码实现 JS轮播图的实现核心是使用JavaScript来控制图片的切换和显示配合HTML和CSS完成布局和样式设置。通过定时器实现图片的自动切换。
1、HTML部分
它描述了一个包含图片、标题、指示器和切换按钮的轮播图组件。
div classsliderdiv classslider-wrapperimg src./images/slider01.jpg alt //divdiv classslider-footerp对人类来说会不会太超前了/pul classslider-indicatorli /lili/lili/lili/lili/lili/lili/lili/li/uldiv classtogglebutton classprevlt;/buttonbutton classnextgt;/button/div/div/div
这段HTML代码定义了一个名为slider的div容器其中包含两个子容器一个名为slider-wrapper的div和一个名为slider-footer的div。在slider-wrapper中有一个img标签用于显示轮播图的图片。在slider-footer中有一个p标签用于显示标题文本“对人类来说会不会太超前了”。接下来是一个名为slider-indicator的ul列表其中包含8个li元素这些元素将用作指示器以显示当前图片的位置和轮播图中的其他图片。最后在toggle div中有两个按钮一个名为prev另一个名为next它们将用于切换到前一张或后一张图片。
2、css部分
这段CSS代码定义了轮播图组件的样式。 style* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}/style
首先使用通配符选择器 * 将 box-sizing 属性设置为 border-box以确保元素的宽度和高度包括边框和内边距。接下来为slider容器设置宽度、高度和溢出隐藏属性以限制其大小并隐藏超出部分的内容。然后为slider-wrapper容器设置宽度和高度并将其子元素 img 的宽度和高度设置为100%以便图片填充整个容器。接着为slider-footer容器设置高度、背景颜色、内边距和相对定位属性以便在底部显示标题文本和切换按钮。然后为toggle容器设置绝对定位属性将其放置在slider-footer的右上角。接下来为toggle容器中的按钮设置外观、边框、背景、颜色、圆角、光标等样式并添加悬停效果。然后为slider-footer容器中的段落设置颜色、字体大小和下边距等样式。最后为slider-indicator列表设置列表样式、对齐方式等样式并为列表项设置宽度、高度、边距、背景颜色、透明度等样式以及激活状态的样式。
3、js部分
这段代码是一个简单的轮播图实现首先定义了一个包含图片、标题和颜色的数组然后随机选择一个元素作为初始显示内容。接着设置图片、标题和背景颜色。最后通过定时器每隔1秒切换到下一个元素。
// 1. 初始数据const sliderData [{ url: ./images/slider01.jpg, title: 对人类来说会不会太超前了, color: rgb(100, 67, 68) },{ url: ./images/slider02.jpg, title: 开启剑与雪的黑暗传说, color: rgb(43, 35, 26) },{ url: ./images/slider03.jpg, title: 真正的jo厨出现了, color: rgb(36, 31, 33) },{ url: ./images/slider04.jpg, title: 李玉刚让世界通过B站看到东方大国文化, color: rgb(139, 98, 66) },{ url: ./images/slider05.jpg, title: 快来分享你的寒假日常吧~, color: rgb(67, 90, 92) },{ url: ./images/slider06.jpg, title: 哔哩哔哩小年YEAH, color: rgb(166, 131, 143) },{ url: ./images/slider07.jpg, title: 一站式解决你的电脑配置问题, color: rgb(53, 29, 25) },{ url: ./images/slider08.jpg, title: 谁不想和小猫咪贴贴呢, color: rgb(99, 72, 114) },]const img document.querySelector(.slider-wrapper img)const pp document.querySelector(.slider-footer p)const footer document.querySelector(.slider-footer)let i0function func(){img.srcsliderData[i].urlpp.innerHTMLsliderData[i].titleconst li document.querySelector(.slider-indicator li:nth-child(${i1}))li.classList.add(active)footer.style.backgroundColorsliderData[i].colorif (i0) {const lii document.querySelector(.slider-indicator li:nth-child(${sliderData.length}))lii.classList.remove(active)}else {const liii document.querySelector(.slider-indicator li:nth-child(${i}))liii.classList.remove(active)};iif (isliderData.length) {i0};console.log(i)}let nsetInterval(func, 1000)
4、代码效果 总结 以上就是使用原生JavaScript实现简单轮播图的方法。虽然现代前端开发中有许多现成的库和框架可以提供更复杂的轮播图组件但理解其背后的基本原理对于提高编程技能仍然非常重要。希望这篇文章能帮助你掌握如何使用原生JavaScript创建轮播图从而为你的项目增添更多交互性和视觉吸引力。
