原生JavaScript实现轮播图示例与关键代码
130 浏览量
更新于2024-08-30
收藏 66KB PDF 举报
本文将详细介绍如何使用原生JavaScript实现一个基本的轮播图功能。首先，我们从HTML结构开始，创建了一个包含图片容器、屏幕区域、导航按钮以及隐藏的切换按钮的简单布局。以下是关键知识点的详细解释：
1. HTML结构：
- `<html>` 和 `<head>` 元素定义了整个页面的基础结构，`lang="en"` 指定语言为英语。
- `<meta charset="UTF-8">` 定义了字符集，确保文本正确显示。
- `<title>` 标签是页面标题，通常会在浏览器标签页上显示。
- CSS部分设置了通用样式，如清除内联样式、边距、列表样式和边框，确保轮播图的整洁布局。
2. 轮播图容器与屏幕区域：
- `.all` 类用于设置轮播图的整体样式，包括宽度、高度、边框和居中对齐。
- `.screen` 是实际的图片展示区域，设置宽度和高度，并通过 `overflow:hidden` 隐藏超出部分，确保图片不会显示在屏幕外。
- `.screenli` 用于存储每张图片，浮动左对齐，并同样设置宽度和高度。
3. 导航控制：
- `.screenul` 是隐藏的图片滑动容器，宽度为3000px，确保图片可以无缝滚动。每个 `.screenli` 的宽度与 `.screen` 相同，通过绝对定位放置在 `.screenul` 内。
- `.allol` 是导航按钮区域，位于右下角，使用绝对定位显示。
- `.allolli` 是单个导航按钮，每个按钮宽度和高度固定，背景颜色、边框和鼠标悬停效果设定，通过 `cursor:pointer` 显示为可点击状态。
- 当前显示的图片按钮应用 `.current` 类，背景色变为黄色，表示选中状态。
4. 切换按钮：
- `#arr` 是切换按钮的容器，通常在需要时显示出来，这里设置为 `display:none` 隐藏。
- `#arrspan` 是切换按钮的文本元素，显示切换箭头，通过 `position:absolute` 定位在屏幕顶部居中。
要实现轮播图的动态切换，需要编写JavaScript代码来控制`.screenul` 的位置移动，并在用户点击导航按钮时更新当前显示的图片。这通常涉及到事件监听（如`:hover` 或 `click`）和计算图片索引。这部分代码没有提供，但可以通过以下步骤完成：
- 初始化时，设置一个变量存储当前显示的图片索引。
- 创建一个函数，接收新的索引值，更新`.screenul` 的 `left` 属性，使其偏移相应数量的图片宽度。
- 给导航按钮添加事件监听器，当点击时调用上述更新函数，传入对应的索引值。
- 在切换按钮显示或隐藏时，控制`.allol` 和 `#arr` 的 `display` 属性。
通过以上步骤，就可以创建一个基础的原生JavaScript轮播图，用户可以通过点击导航按钮浏览不同的图片。根据实际需求，还可以添加更多的交互效果，如动画过渡、定时自动切换等。
使用原生的使用原生的javascript来实现轮播图来实现轮播图
下面看下js轮播图的实现代码，具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
下载后可阅读完整内容，剩余4页未读，立即下载
226 浏览量
2024-01-03 上传
630 浏览量
464 浏览量
103 浏览量
103 浏览量
点击了解资源详情
点击了解资源详情
weixin_38516386
- 粉丝: 5
- 资源: 899
我的内容管理
展开
最新资源
- pytorch_DGN：DGN的pytorch实现
- -vue-ts-vuecli3.0-elementUi:有赞 + vue + ts + vuecli3.0 + elementUi
- nocobase:NocoBase是一个开源且免费的无代码开发平台
- itty-router-extras:多种卡路里轻便型路由器的美味佳肴
- quarky:博克博克
- 数电电路设计图.rar
- 【ssm项目源码】宾馆客房入住管理系统.zip
- VS-Code-Produtividade-Infinita:在 Visual Studio Code 中实现无限生产力
- images-to-lottie-editor:基于Lottie网络编辑器的简单图像:pencil:
- Postman.zip
- VC将二维数组显示为图像
- 最新仿icloud官方源码,苹果官网源码带后台邮件提醒功能
- 250Kmh动车组非动力转向架的设计.zip
- seg_memoire
- MPMessagePack:Objective-C 的 MessagePack 实现 msgpack.org[Objective-C]
- mycrm
