当前位置:网站首页>学习探索-无缝轮播图
学习探索-无缝轮播图
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>
边栏推荐
- ROS自定义消息发布订阅示例
- Meilu biological IPO was terminated: the annual revenue was 385million, and Chen Lin was the actual controller
- R language ggplot2 visualization: use the ggdotplot function of ggpubr package to visualize dot plot, set the palette parameter, and set the colors of data points and box graphs of dot plots at differ
- The nearest library of Qinglong panel
- When visual studio code starts, it prompts "the code installation seems to be corrupt. Please reinstall." Solution to displaying "unsupported" information in the title bar
- 关于静态类型、动态类型、id、instancetype
- 2022.2.12
- pytorch常见损失函数
- Use of deg2rad and rad2deg functions in MATLAB
- Solution of commercial supply chain management platform for packaging industry: layout smart supply system and digitally integrate the supply chain of packaging industry
猜你喜欢
提前解锁 2 大直播主题!今天手把手教你如何完成软件包集成?|第 29-30 期
zabbix 代理服务器 与 zabbix-snmp 监控
An error occurs when installing MySQL: could not create or access the registry key needed for the
Understanding disentangling in β- VAE paper reading notes
[matlab] Simulink the input and output variables of the same module cannot have the same name
MRO industrial products enterprise procurement system: how to refine procurement collaborative management? Industrial products enterprises that want to upgrade must see!
ACTF 2022圆满落幕,0ops战队二连冠!!
零基础入门PolarDB-X:搭建高可用系统并联动数据大屏
Abstract classes and abstract methods
包装行业商业供应链管理平台解决方案:布局智慧供应体系,数字化整合包装行业供应链
随机推荐
Solution of commercial supply chain management platform for packaging industry: layout smart supply system and digitally integrate the supply chain of packaging industry
安装Mysql报错:Could not create or access the registry key needed for the...
基于蝴蝶种类识别
Elastic search indexes are often deleted [closed] - elastic search indexes gets deleted frequently [closed]
QLabel 跑马灯文字显示
Digital "new" operation and maintenance of energy industry
Simple understanding of MySQL database
Abstract classes and abstract methods
Php+redis realizes the function of canceling orders over time
Sanmian ant financial successfully got the offer, and has experience in Android development agency recruitment and interview
10 schemes to ensure interface data security
五金机电行业供应商智慧管理平台解决方案:优化供应链管理,带动企业业绩增长
Graffiti intelligence is listed on the dual main board in Hong Kong: market value of 11.2 billion Hong Kong, with an annual revenue of 300 million US dollars
Word如何显示修改痕迹
通俗的讲解,带你入门协程
零基础入门PolarDB-X:搭建高可用系统并联动数据大屏
倒计时2天|腾讯云消息队列数据接入平台(Data Import Platform)直播预告
RT-Thread 组件 FinSH 使用时遇到的问题
short i =1; i=i+1与short i=1; i+=1的区别
Detailed idea and code implementation of infix expression to suffix expression