使用原生JS创建手动轮播图的步骤解析
33 浏览量
更新于2024-08-31
收藏 45KB PDF 举报
本文将介绍如何使用原生JavaScript实现手动轮播图效果，包括HTML结构、CSS样式以及JavaScript代码的编写。
手动轮播图是网页设计中常见的一种动态效果，用于展示图片、新品商品或相关信息，能够提升网页的视觉吸引力。本实例将探讨如何使用纯JavaScript来创建一个简单易用的手动轮播图。
首先，我们需要设置HTML布局。创建一个`<div id="box">`作为轮播图容器，其中包含一个用于显示图片的`<div id="lunbo">`，以及两个用于切换图片的左右箭头`<div id="left">`和`<div id="right">`。此外，还需要一个`<div id="radiu">`用于显示当前图片的索引，并在其中嵌套一个`<ul>`来表示每个图片对应的列表项。
HTML代码如下：
```html
<body>
<div id="box">
<div id="lunbo"><img src="img/1.jpg" id="img"/></div>
<div id="left"><</div>
<div id="right">></div>
<div id="radiu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
```
接着，我们需要对这些元素进行CSS样式设置，包括设置容器的大小、边距、颜色以及图片的定位等。例如：
```css
body {
background: darkturquoise;
}
#box {
height: 320px;
width: 480px;
margin: 3px auto;
border: 2px solid red;
}
#lunbo {
height: 292px;
width: 453px;
border: 1px solid yellow;
margin: 0px auto;
position: relative;
}
#left, #right {
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
}
```
最后，使用JavaScript来实现手动轮播功能。这包括处理点击左右箭头时的事件，更新图片的显示以及当前索引的显示。例如：
```javascript
var imgList = document.querySelectorAll('#lunbo img');
var index = 0;
var radiusList = document.querySelectorAll('#radiu li');
function switchImg(dir) {
if (dir === 'left') {
index--;
if (index < 0) {
index = imgList.length - 1;
}
} else if (dir === 'right') {
index++;
if (index >= imgList.length) {
index = 0;
}
}
imgList.forEach((item, i) => {
item.style.display = i === index ? 'block' : 'none';
});
radiusList.forEach((item, i) => {
item.style.color = i === index ? 'red' : 'black';
});
}
document.getElementById('left').addEventListener('click', () => {
switchImg('left');
});
document.getElementById('right').addEventListener('click', () => {
switchImg('right');
});
```
这段JavaScript代码实现了当用户点击左右箭头时，图片会按照指定方向切换，同时当前选中的图片索引也会在圆点列表中高亮显示。
以上就是使用原生JavaScript实现手动轮播图的完整过程，包括HTML结构、CSS样式和JavaScript逻辑。这个实例可以帮助开发者理解如何在没有依赖任何库或框架的情况下，创建一个基本但实用的轮播图组件。
原生原生JS实现手动轮播图效果实例代码实现手动轮播图效果实例代码
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等，轮播图主要
用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。接下来通过本文给大家分享原生JS
实现手动轮播图的实例代码，一起看看吧
手动轮播图，为轮播图中的一种，轮播图主要有无缝轮播，手动轮播，延迟轮播，切换轮播等等。。。
轮播图主要用于展现图片，新出商品，词条，又能美观网页。給网页中增加动态效果。
手动轮播，是小编认为最简单的一种轮播方式，既能左右翻页，还能通过悬浮按钮，快速预览图片，所以今天就给大家写一个
原生js手动轮播图。
一，利用一，利用JavaScript制作手动轮播图，首先排版。制作手动轮播图，首先排版。
引入默认样式表（可以手写）；
<link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" rel="external nofollow" />//本博客有css默认样式表可以下载。
div排版布局：
<body>
<div id="box">
<div id="lunbo"><img src="img/1.jpg" id="img"/></div>
<div id="left"><</div>
<div id="right">></div>
<div id="radiu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
二，定义二，定义div的的CSS样式，给样式，给div设置宽高，定位。设置宽高，定位。
<style>
body{
background: darkturquoise;
}
#box{
height:320px;
width:480px;
margin: 3px auto;
border: 2px solid red;
}
#lunbo{
height: 292px;
width:453px;
border: 1px solid yellow;
margin: 0px auto;
position: relative;
}
#left{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 440px;
color: black;
}
#right{
height: 60px;
width: 60px;
font-size: 60px;
text-align: center;
line-height: 60px;
position: absolute;
top:150px;
left: 880px;
下载后可阅读完整内容，剩余4页未读，立即下载
2020-10-19 上传
2020-12-29 上传
2018-05-30 上传
2021-01-21 上传
点击了解资源详情
点击了解资源详情
weixin_38740391
- 粉丝: 6
- 资源: 961
我的内容管理
展开
最新资源
- 探索数据转换实验平台在设备装置中的应用
- 使用git-log-to-tikz.py将Git日志转换为TIKZ图形
- 小栗子源码2.9.3版本发布
- 使用Tinder-Hack-Client实现Tinder API交互
- Android Studio新模板：个性化Material Design导航抽屉
- React API分页模块：数据获取与页面管理
- C语言实现顺序表的动态分配方法
- 光催化分解水产氢固溶体催化剂制备技术揭秘
- VS2013环境下tinyxml库的32位与64位编译指南
- 网易云歌词情感分析系统实现与架构
- React应用展示GitHub用户详细信息及项目分析
- LayUI2.1.6帮助文档API功能详解
- 全栈开发实现的chatgpt应用可打包小程序/H5/App
- C++实现顺序表的动态内存分配技术
- Java制作水果格斗游戏：策略与随机性的结合
- 基于若依框架的后台管理系统开发实例解析
