当前位置:网站首页>JS rotation chart
JS rotation chart
2022-07-01 04:21:00 【MyDreamingCode】
One 、 Carousel chart style + structure
1. structure ( Left and right arrows 、 Small circle 、 Rotation picture area )
<div class="banner">
<a href="javascript:;" class="arrow_pre arrow"></a>
<a href="javascript:;" class="arrow_next arrow"></a>
<ul class="lunbo">
<li>
<a href="#">
<img src="./uploads/banner1.jpg">
</a>
</li>
<li>
<a href="#">
<img src="./uploads/banner2.jpg">
</a>
</li>
<li>
<a href="#">
<img src="./uploads/banner3.jpg">
</a>
</li>
<li>
<a href="#">
<img src="./uploads/banner4.jpg">
</a>
</li>
</ul>
<ul class="dot"></ul>
</div>
2. style
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.banner {
position: relative;
width: 721px;
height: 455px;
margin: 50px auto;
overflow: hidden;
}
.banner img {
width: 100%;
height: 100%;
}
.arrow {
position: absolute;
top: 50%;
width: 20px;
height: 32px;
transform: translateY(-50%);
z-index: 1;
display: none;
}
.arrow_pre {
left: 0;
background: url('./img/arrow-prev.png') no-repeat;
}
.arrow_next {
right: 0;
background: url('./img/arrow-next.png') no-repeat;
}
.dot {
position: absolute;
left: 50%;
bottom: 10px;
height: 15px;
padding: 3px;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, .3);
}
.dot li {
float: left;
width: 15px;
height: 15px;
margin: 0 5px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.dot li.current {
background-color: #fff;
}
.lunbo {
position: absolute;
top: 0;
left: 0;
width: 400%;
}
.lunbo li {
float: left;
}
3. Dynamic generation of small circles
var length = document.querySelector('.lunbo').children.length;
var dot = document.querySelector('.dot');
for(var i = 0; i < length; i++) {
var li = document.createElement('li');
dot.appendChild(li);
li.addEventListener('click', function() {
for(var i = 0; i < dot.children.length; i++) {
dot.children[i].className = '';
}
this.className = 'current';
})
}
dot.children[0].className = 'current';
Two 、 operation
1. When the mouse passes the carousel , Show left and right arrow buttons ; When leaving the carousel , Hide the left and right arrow buttons .
window.addEventListener('load', function() {
var banner = document.querySelector('.banner');
var arrow_pre = document.querySelector('.arrow_pre');
var arrow_next = document.querySelector('.arrow_next');
banner.addEventListener('mouseenter', function() {
arrow_pre.style.display = 'block';
arrow_next.style.display = 'block';
})
banner.addEventListener('mouseleave', function() {
arrow_pre.style.display = 'none';
arrow_next.style.display = 'none';
})
})
2. introduce animate.js Slow motion animation encapsulation function
function animate(obj, destination, callback) {
clearInterval(obj.timer || null);
obj.timer = setInterval(function(){
var step = (destination - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == destination) {
if(callback) {
callback();
}
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 10)
}
3. ul The moving formula of the rotation area :dot Reference no. × Picture width
var lunbo = document.querySelector('.lunbo');
var length = document.querySelector('.lunbo').children.length;
var dot = document.querySelector('.dot');
for(var i = 0; i < length; i++) {
var li = document.createElement('li');
li.setAttribute('data-index',i);
dot.appendChild(li);
li.addEventListener('click', function() {
for(var i = 0; i < dot.children.length; i++) {
dot.children[i].className = '';
}
this.className = 'current';
animate(lunbo, -banner.offsetWidth * this.dataset.index);
})
}
dot.children[0].className = 'current';
边栏推荐
- Jenkins自动清理构建历史
- 浏览器顶部loading(来自知乎)
- 283.移动零
- JD intelligent customer service Yanxi intention system construction and intention recognition technology introduction
- This may be your last chance to join Tencent
- 线程常用方法与守护线程
- Why can't you find the corresponding function by clicking go to definiton (super easy has a diagram)
- 互联网行业最佳产品开发流程 推荐!
- Tip of edge browser: enter+ctrl can automatically convert the address bar into a web address
- Codeforces Round #721 (Div. 2)B1. Palindrome Game (easy version)B2. Palindrome game (hard version)
猜你喜欢
创新界,聚势行 | 2022人大金仓“百城巡展”火热开启
[ta- frost wolf \u may- hundred people plan] 1.1 rendering pipeline
TASK04|数理统计
2022年上海市安全员C证考试题模拟考试题库及答案
【发送邮件报错】535 Error:authentication failed
Go learning --- unit test subtest
Coinbase in a bear market: losses, layoffs, stock price plunges
LeetCode 1828. Count the number of points in a circle
After many job hopping, the monthly salary is equal to the annual salary of old colleagues
283.移动零
随机推荐
Inventory the six second level capabilities of Huawei cloud gaussdb (for redis)
206. reverse linked list
Daily question - line 10
Unity之三维空间多点箭头导航
LetCode 1829. Maximum XOR value per query
[TA frost wolf \u may- hundred talents plan] 1.2.3 MVP matrix operation
分账技术赋能农贸市场,重塑交易管理服务效能
Use winmtr software to simply analyze, track and detect network routing
Learn Chapter 20 of vue3 (keep alive cache component)
[recommended algorithm] C interview question of a small factory
Task04 | statistiques mathématiques
What does ft mean in the data book table
Redis(七)优化建议
【深度学习】(4) Transformer 中的 Decoder 机制,附Pytorch完整代码
JMeter learning notes 2 - brief introduction to graphical interface
为什么香港服务器最适合海外建站使用
Knowledge supplement: redis' basic data types and corresponding commands
Note de développement du système embarqué 80: application du concepteur Qt à la conception de l'interface principale
浏览器顶部loading(来自知乎)
JMeter login failure, extracting login token, and obtaining token problem solving