当前位置:网站首页>Roulette chart 2 - writing of roulette chart code
Roulette chart 2 - writing of roulette chart code
2022-07-07 07:59:00 【Code machine - Ying】
<div class="banner"> </div>
<script src="./02move.js"></script>
<script>
let oBanner = document.querySelector('.banner');
const arr = [
{ id: 1, width: 500, height: 333, url: '1.jpg' },
{ id: 2, width: 500, height: 333, url: '2.jpg' },
{ id: 3, width: 500, height: 333, url: '3.jpg' },
{ id: 4, width: 500, height: 333, url: '4.jpg' },
{ id: 5, width: 500, height: 333, url: '5.jpg' }
];
let index = 1;
let oUl;
let oOl;
let oDiv;
let oUllis;
let oOllis;
let liWidth;
let time;
let res = true;
// Call the auto generate page function
setPage();
autoLoop();
mouseMove();
setClick();
hidden();
// Dynamically generate pages
function setPage() {
oUl = document.createElement('ul');
oOl = document.createElement('ol');
oDiv = document.createElement('div');
let oUlLiStr = '';
let oOlLiStr = '';
arr.forEach(function (item, key) {
oUlLiStr += `<li><img src="./images/${item.url}" alt=""></li>`;
oOlLiStr += key === 0 ? `<li class="active" num=${key} name="olli"></li>` : `<li num=${key} name='olli'></li>`
})
oUl.innerHTML = oUlLiStr;
oOl.innerHTML = oOlLiStr;
oDiv.innerHTML = `<a href="Javascript:;" name="left"><</a><a href="Javascript:;" name="right">></a>`;
oBanner.appendChild(oUl);
oBanner.appendChild(oOl);
oBanner.appendChild(oDiv);
oUllis = oUl.querySelectorAll('li');
oOllis = oOl.querySelectorAll('li');
liWidth = oUllis[0].offsetWidth;
const oFirstClone = oUllis[0].cloneNode(true);
const oLastClone = oUllis[arr.length - 1].cloneNode(true);
oUl.appendChild(oFirstClone);
oUl.insertBefore(oLastClone, oUllis[0]);
oUl.style.width = (arr.length + 2) * liWidth + 'px';
oUl.style.left = -liWidth + 'px'
}
// Auto carousel function
function autoLoop() {
time = setInterval(function () {
// Prevent clicking too fast
if (res) {
res = false;
}
else {
return;
}
index++;
setFocusStyle();
move(oUl, { left: -liWidth * index }, loopEnd)
}, 3000)
}
// At the end of the rotation function , Called function
function loopEnd() {
if (index === arr.length + 2 - 1) {
index = 1;
}else if(index===0){
index=arr.length;
}
oUl.style.left = -liWidth * index + 'px';
res = true;
}
// Change of focus style
function setFocusStyle() {
oOllis.forEach(function (item, key) {
item.classList.remove('active');
})
if (index === arr.length + 2 - 1) {
oOllis[0].classList.add('active');
}
else if (index === 0) {
oOllis[arr.length - 1].classList.add('active');
}
else {
oOllis[index - 1].classList.add('active')
}
}
// Mouse in and out
function mouseMove() {
oBanner.addEventListener('mouseenter', function () {
clearInterval(time);
});
oBanner.addEventListener('mouseleave', function () {
autoLoop();
})
}
// Add click event
function setClick() {
oBanner.addEventListener("click", function (e) {
if (e.target.getAttribute('name') === 'left') {
if (res) {
res = false;
} else {
return;
}
index--;
setFocusStyle();
move(oUl, { left: -index * liWidth }, loopEnd);
}
else if (e.target.getAttribute('name') === 'right') {
if (res) {
res = false;
} else {
return;
}
index++;
setFocusStyle();
move(oUl, { left: -index * liWidth }, loopEnd);
}
else if (e.target.getAttribute('name') === 'olli') {
if (res) {
res = false;
} else {
return;
}
index = Number(e.target.getAttribute('num'))+1;
setFocusStyle();
move(oUl, { left: -index * liWidth }, loopEnd);
}
})
}
//
function hidden(){
// to documnent Add browser display status monitoring
document.addEventListener('visibilitychange',function(){
// If the status displayed by the browser is hidden
if(document.visibilityState==='hidden'){
// Prove that the current browser hide is minimized
// Clear timer
clearInterval(time);
}
// If the browser displays a status that describes visible
else if(document.visibilityState==='visible'){
// Prove that the current browser displays
// Call the auto rotation function again
autoLoop();
}
})
}
边栏推荐
- 3D reconstruction - stereo correction
- Qt学习26 布局管理综合实例
- numpy中dot函数使用与解析
- 芯片 设计资料下载
- 2022 National latest fire-fighting facility operator (primary fire-fighting facility operator) simulation questions and answers
- [UVM practice] Chapter 2: a simple UVM verification platform (2) only driver verification platform
- [performance pressure test] how to do a good job of performance pressure test?
- padavan手动安装php
- 2022年茶艺师(中级)考试试题及模拟考试
- Paddlepaddle 29 dynamically modify the network structure without model definition code (relu changes to prelu, conv2d changes to conv3d, 2D semantic segmentation model changes to 3D semantic segmentat
猜你喜欢
Li Kou interview question 04.01 Path between nodes
【斯坦福计网CS144项目】Lab4: TCPConnection
Technology cloud report: from robot to Cobot, human-computer integration is creating an era
@component(““)
IO stream file
自定义类加载器加载网络Class
Common validation comments
【数字IC验证快速入门】17、SystemVerilog学习之基本语法4(随机化Randomization)
Cnopendata list data of Chinese colleges and Universities
QT learning 28 toolbar in the main window
随机推荐
2022 welder (elementary) judgment questions and online simulation examination
Explore Cassandra's decentralized distributed architecture
[2022 actf] Web Topic recurrence
Linux server development, MySQL process control statement
Solution: could not find kf5 (missing: coreaddons dbusaddons doctools xmlgui)
Linux server development, redis source code storage principle and data model
Shell 脚本的替换功能实现
leetcode:105. Constructing binary trees from preorder and inorder traversal sequences
自定义类加载器加载网络Class
C language flight booking system
Linux server development, detailed explanation of redis related commands and their principles
The charm of SQL optimization! From 30248s to 0.001s
[webrtc] M98 screen and window acquisition
Resource create package method
[UVM foundation] what is transaction
芯片 設計資料下載
图解GPT3的工作原理
Linux server development, SQL statements, indexes, views, stored procedures, triggers
Leetcode 40: combined sum II
开源生态|打造活力开源社区,共建开源新生态!