当前位置:网站首页>学习探索-无缝轮播图
学习探索-无缝轮播图
2022-07-06 11:32:00 【miao_zz】
效果图
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.carousel-container {
width: 400px;
position: relative;
margin: 40px auto;
overflow: hidden;
}
.carousel-list {
width: 100%;
height: 100%;
display: flex;
position: relative;
}
.carousel-items {
width: 100%;
height: 100%;
}
.carousel-items img {
width: 100%;
height: 100%;
display: block;
}
.carousel-arrow {
border-radius: 50%;
width: 40px;
height: 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
cursor: pointer;
}
.carousel-arrow:hover {
font-size: 16px;
}
.carousel-arrow-left {
left: 50px;
}
.carousel-arrow-right {
right: 50px;
}
.indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.indicator span {
border: 1px solid #00a2ef;
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
.indicator-current {
background-color: #00a2ef;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="carousel-list">
<div class="carousel-items">
<img src="img/8.jpg" />
</div>
<div class="carousel-items">
<img src="img/9.jpg" />
</div>
<div class="carousel-items">
<img src="img/10.jpg" />
</div>
<div class="carousel-items">
<img src="img/11.jpg" />
</div>
</div>
<div class="carousel-arrow carousel-arrow-left">≪</div>
<div class="carousel-arrow carousel-arrow-right">≫</div>
<div class="indicator">
<span class="indicator-current"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
<script type="text/javascript">
const doms = {
carouselBoxWidth: document.querySelector(".carousel-container").clientWidth, //获取轮播图可视区域的宽度
carouselList: document.querySelector(".carousel-list"),
arrowLeft: document.querySelector(".carousel-arrow-left"),
arrowRight: document.querySelector(".carousel-arrow-right"),
indicators: document.querySelectorAll(".indicator span"),
currentIndex: 0, //下标从0开始
}
init();
function init() {
//复制第一张图
const first = doms.carouselList.firstElementChild.cloneNode(true);
//复制最后一张图
const last = doms.carouselList.lastElementChild.cloneNode(true);
//将第一张图放到末尾
doms.carouselList.appendChild(first);
//将最后一张图放到第一张,
/**
* insertBefore() 方法可在已有的子节点前插入一个新的子节点。
* 语法:
* insertBefore(newnode,node);
* 参数:
* newnode: 要插入的新节点。
* node: 指定此节点前插入节点。
* **/
doms.carouselList.insertBefore(last, doms.carouselList.firstElementChild);
//设置包裹轮播内容块的宽度,
//document.querySelector(".carousel-list").childElementCount,要放在插入节点的后面,才能获取最新的节点个数
const childElementCount = document.querySelector(".carousel-list").childElementCount;
//给轮播图外框设置宽度,用于包裹所有轮播块
doms.carouselList.style.width = doms.carouselBoxWidth * childElementCount + 'px';
doms.carouselList.style.transform = `translateX(-${doms.carouselBoxWidth}px)`;
}
//轮播图渲染
function moveTo(index) {
doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = '0.5s';
//去掉指示器的选中效果
let active = document.querySelector(".indicator span.indicator-current");
active.classList.remove("indicator-current");
//添加选中的指示器
doms.indicators[index].classList.add("indicator-current");
doms.currentIndex = index;
}
//轮播图重置渲染效果
function resetMoveTo(index) {
doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = 'none';
//去掉指示器的选中效果
let active = document.querySelector(".indicator span.indicator-current");
active.classList.remove("indicator-current");
//添加选中的指示器
doms.indicators[index].classList.add("indicator-current");
doms.currentIndex = index;
}
//点击指示器
doms.indicators.forEach((item, index) => {
item.addEventListener("click", () => {
moveTo(index)
})
})
//点击向左箭头
doms.arrowLeft.addEventListener("click", () => {
const total = doms.indicators.length;
if (doms.currentIndex === 0) {
//无缝轮播
//resetMoveTo(total - 1);等效于下面
doms.carouselList.style.transform = `translateX(-${(total)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = 'none';
doms.carouselList.clientHeight; //强制渲染
moveTo(total - 1)
} else {
moveTo(doms.currentIndex - 1)
}
})
//点击向右箭头
doms.arrowRight.addEventListener("click", () => {
const total = doms.indicators.length;
if (doms.currentIndex === total - 1) {
//无缝轮播
//resetMoveTo(0);等效于下面
doms.carouselList.style.transform = `translateX(-${(0+1)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = 'none';
doms.carouselList.clientHeight; //强制渲染
moveTo(0)
} else {
moveTo(doms.currentIndex + 1)
}
})
</script>
</html>
边栏推荐
- 关于静态类型、动态类型、id、instancetype
- Meilu biological IPO was terminated: the annual revenue was 385million, and Chen Lin was the actual controller
- English topic assignment (25)
- Solution of intelligent management platform for suppliers in hardware and electromechanical industry: optimize supply chain management and drive enterprise performance growth
- LeetCode-1279. Traffic light intersection
- R语言使用dt函数生成t分布密度函数数据、使用plot函数可视化t分布密度函数数据(t Distribution)
- It's super detailed in history. It's too late for you to read this information if you want to find a job
- 倒计时2天|腾讯云消息队列数据接入平台(Data Import Platform)直播预告
- Yutai micro rushes to the scientific innovation board: Huawei and Xiaomi fund are shareholders to raise 1.3 billion
- Openmv4 learning notes 1 --- one click download, background knowledge of image processing, lab brightness contrast
猜你喜欢
About static type, dynamic type, ID, instancetype
反射及在运用过程中出现的IllegalAccessException异常
数学知识——高斯消元(初等行变换解方程组)代码实现
第五期个人能力认证考核通过名单公布
Synchronous development of business and application: strategic suggestions for application modernization
倒计时2天|腾讯云消息队列数据接入平台(Data Import Platform)直播预告
pychrm社区版调用matplotlib.pyplot.imshow()函数图像不弹出的解决方法
Helm deploy etcd cluster
冒烟测试怎么做
Pychrm Community Edition calls matplotlib pyplot. Solution of imshow() function image not popping up
随机推荐
PMP每日一练 | 考试不迷路-7.6
Xingnuochi technology's IPO was terminated: it was planned to raise 350million yuan, with an annual revenue of 367million yuan
受益匪浅,安卓面试问题
渲大师携手向日葵,远控赋能云渲染及GPU算力服务
R语言使用rchisq函数生成符合卡方分布的随机数、使用plot函数可视化符合卡方分布的随机数(Chi Square Distribution)
Reptiles have a good time. Are you full? These three bottom lines must not be touched!
Cereals Mall - Distributed Advanced p129~p339 (end)
Meilu biological IPO was terminated: the annual revenue was 385million, and Chen Lin was the actual controller
Use map function and split function to type multiple elements in one line
[pytorch] yolov5 train your own data set
Openmv4 learning notes 1 --- one click download, background knowledge of image processing, lab brightness contrast
Live broadcast today | the 2022 Hongji ecological partnership conference of "Renji collaboration has come" is ready to go
Reflection and illegalaccessexception exception during application
How word displays modification traces
usb host 驱动 - UVC 掉包
思维导图+源代码+笔记+项目,字节跳动+京东+360+网易面试题整理
Use of map (the data of the list is assigned to the form, and the JSON comma separated display assignment)
关于静态类型、动态类型、id、instancetype
[depth first search] Ji suanke: a joke of replacement
史上超级详细,想找工作的你还不看这份资料就晚了