Implementation of Simple Carousel Map Based on JavaScript
- 2021-11-01 01:44:24
- OfStack
In this paper, we share the specific code of JavaScript to realize simple carousel diagram for your reference. The specific contents are as follows
Implementation idea of js carousel map
1. Get the left and right buttons of the element box first
2. The mouse passes through the show/hide left and right buttons
3. Dynamically generate small circles and add custom attributes
4. Click on the small circle event to add current class name
5. Add animation event animate equals-index number * focusWidth
6. Clone the first picture to the back
7. Add right/left button click events
8. Set the timer to manually call the right button click event
html code section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css" >
<script src="js/index.js"></script>
</head>
<body>
<div class="focus">
<a href="javascript:;" class="arrow_r">></a>
<a href="javascript:;" class="arrow_l">
<</a>
<ul>
<li>
<a href=""><img src="images/focus.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/focus1.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/focus2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/focus3.jpg" alt=""></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
</body>
</html>
css Style Section
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: top;
}
a {
text-decoration: none;
}
.focus {
position: relative;
width: 721px;
height: 455px;
margin: 100px auto;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow_r,
.arrow_l {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 24px;
background: rgba(0, 0, 0, .2);
color: #fff;
z-index: 1;
}
.arrow_r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
border: 2px solid rgba(255, 255, 255, .5);
border-radius: 50%;
margin: 0 3px;
cursor: pointer;
}
.current {
background-color: #fff;
}
javascript Part
window.addEventListener('load', function() {
// Get Element
var focus = document.querySelector('.focus');
var arrow_r = document.querySelector('.arrow_r');
var arrow_l = document.querySelector('.arrow_l');
var focusWidth = focus.offsetWidth;
// Mouse passing focus Box Display / Hide Left and right side buttons Suspend carousel
focus.addEventListener('mouseenter', function() {
arrow_r.style.display = 'block';
arrow_l.style.display = 'block';
clearInterval(timer);
timer = null;
});
focus.addEventListener('mouseleave', function() {
arrow_r.style.display = 'none';
arrow_l.style.display = 'none';
timer = setInterval(function() {
// Call click event
arrow_r.click();
}, 2000);
});
// Dynamically generate small circles
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
li.setAttribute('index', i);
ol.appendChild(li);
// Small circle click event
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
var index = this.getAttribute('index');
num = index;
circle = index;
this.className = 'current';
animate(ul, -index * focusWidth);
})
}
ol.children[0].className = 'current';
// Clonidy 1 Put the picture at the end 1 Zhang
var fis = ul.children[0].cloneNode(true);
ul.appendChild(fis);
// Right button click event
var num = 0;
var circle = 0;
arrow_r.addEventListener('click', function() {
if (num === ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
circle++;
if (circle === ul.children.length - 1) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
});
// Left button click event
arrow_l.addEventListener('click', function() {
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth);
circle--;
circle = circle < 0 ? ol.children.length - 1 : circle;
// Call function
circleChange();
});
// Object that clears the remaining small circles current Class name
function circleChange() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// That leaves the current small circle current Class name
ol.children[circle].className = 'current';
}
// Animation function
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
// Automatic carousel carousel
var timer = setInterval(function() {
// Call click event
arrow_r.click();
}, 2000);
});