当前位置:网站首页>Learning and Exploration - Seamless rotation map
Learning and Exploration - Seamless rotation map
2022-07-06 19:30:00 【miao_ zz】
Seamless carousel
design sketch
Code block
<!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, // Get the width of the visual area of the rotation chart
carouselList: document.querySelector(".carousel-list"),
arrowLeft: document.querySelector(".carousel-arrow-left"),
arrowRight: document.querySelector(".carousel-arrow-right"),
indicators: document.querySelectorAll(".indicator span"),
currentIndex: 0, // Subscript from 0 Start
}
init();
function init() {
// Copy the first picture
const first = doms.carouselList.firstElementChild.cloneNode(true);
// Copy the last picture
const last = doms.carouselList.lastElementChild.cloneNode(true);
// Put the first picture at the end
doms.carouselList.appendChild(first);
// Put the last picture on the first ,
/**
* insertBefore() Method inserts a new child node before an existing child node .
* grammar :
* insertBefore(newnode,node);
* Parameters :
* newnode: The new node to insert .
* node: Insert node before specifying this node .
* **/
doms.carouselList.insertBefore(last, doms.carouselList.firstElementChild);
// Set the width of the package carousel content block ,
//document.querySelector(".carousel-list").childElementCount, It should be placed behind the inserted node , To get the latest number of nodes
const childElementCount = document.querySelector(".carousel-list").childElementCount;
// Set the width for the outline of the carousel , It is used to wrap all the rotating blocks
doms.carouselList.style.width = doms.carouselBoxWidth * childElementCount + 'px';
doms.carouselList.style.transform = `translateX(-${doms.carouselBoxWidth}px)`;
}
// Carousel rendering
function moveTo(index) {
doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = '0.5s';
// Remove the selection effect of the indicator
let active = document.querySelector(".indicator span.indicator-current");
active.classList.remove("indicator-current");
// Add the selected indicator
doms.indicators[index].classList.add("indicator-current");
doms.currentIndex = index;
}
// The carousel image resets the rendering effect
function resetMoveTo(index) {
doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = 'none';
// Remove the selection effect of the indicator
let active = document.querySelector(".indicator span.indicator-current");
active.classList.remove("indicator-current");
// Add the selected indicator
doms.indicators[index].classList.add("indicator-current");
doms.currentIndex = index;
}
// Click the indicator
doms.indicators.forEach((item, index) => {
item.addEventListener("click", () => {
moveTo(index)
})
})
// Click the left arrow
doms.arrowLeft.addEventListener("click", () => {
const total = doms.indicators.length;
if (doms.currentIndex === 0) {
// Seamless rotation
//resetMoveTo(total - 1); Is equivalent to the following
doms.carouselList.style.transform = `translateX(-${(total)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = 'none';
doms.carouselList.clientHeight; // Force rendering
moveTo(total - 1)
} else {
moveTo(doms.currentIndex - 1)
}
})
// Click the right arrow
doms.arrowRight.addEventListener("click", () => {
const total = doms.indicators.length;
if (doms.currentIndex === total - 1) {
// Seamless rotation
//resetMoveTo(0); Is equivalent to the following
doms.carouselList.style.transform = `translateX(-${(0+1)*doms.carouselBoxWidth}px)`;
doms.carouselList.style.transition = 'none';
doms.carouselList.clientHeight; // Force rendering
moveTo(0)
} else {
moveTo(doms.currentIndex + 1)
}
})
</script>
</html>
边栏推荐
- Test technology stack arrangement -- self cultivation of test development engineers
- Mathematical knowledge -- code implementation of Gaussian elimination (elementary line transformation to solve equations)
- The list of people who passed the fifth phase of personal ability certification assessment was published
- 冒烟测试怎么做
- Mysql Information Schema 学习(二)--Innodb表
- map的使用(列表的数据赋值到表单,json逗号隔开显示赋值)
- 助力安全人才专业素养提升 | 个人能力认证考核第一阶段圆满结束!
- MySQL information schema learning (II) -- InnoDB table
- USB host driver - UVC swap
- Looting iii[post sequence traversal and backtracking + dynamic planning]
猜你喜欢
Problems encountered in using RT thread component fish
[玩转Linux] [Docker] MySQL安装和配置
思維導圖+源代碼+筆記+項目,字節跳動+京東+360+網易面試題整理
A full set of teaching materials, real questions of Android interview of 7 major manufacturers including Alibaba Kwai pinduoduo
Low CPU load and high loadavg processing method
Characteristic colleges and universities, jointly build Netease Industrial College
MySQL information schema learning (I) -- general table
Intelligent supply chain management system solution for hardware and electromechanical industry: digital intelligent supply chain "creates new blood" for traditional industries
第五期个人能力认证考核通过名单公布
Mysql Information Schema 学习(一)--通用表
随机推荐
Detailed idea and code implementation of infix expression to suffix expression
中缀表达式转后缀表达式详细思路及代码实现
In 50W, what have I done right?
关于图像的读取及处理等
MATLAB中deg2rad和rad2deg函数的使用
Documents to be used in IC design process
时钟轮在 RPC 中的应用
Solution of commercial supply chain management platform for packaging industry: layout smart supply system and digitally integrate the supply chain of packaging industry
Php+redis realizes the function of canceling orders over time
Leetcode topic [array] - 119 Yang Hui triangle II
ModuleNotFoundError: No module named ‘PIL‘解决方法
助力安全人才专业素养提升 | 个人能力认证考核第一阶段圆满结束!
今日直播 | “人玑协同 未来已来”2022弘玑生态伙伴大会蓄势待发
A popular explanation will help you get started
A full set of teaching materials, real questions of Android interview of 7 major manufacturers including Alibaba Kwai pinduoduo
LeetCode-1279. Traffic light intersection
Translation D28 (with AC code POJ 26:the nearest number)
Don't miss this underestimated movie because of controversy!
[translation] a GPU approach to particle physics
五金机电行业供应商智慧管理平台解决方案:优化供应链管理,带动企业业绩增长