About the implementation of JavaScript carousel
|
Today is another very practical case. Just hearing the name sounds advanced and difficult, right? Today I will write a case that will allow you to easily learn the essence of carousel pictures! ! It’s still the same old rules, let’s take a look at the implementation effect! !
The first step to learning how to create a carousel is to prepare the images and wrap them in li inside ul, give li a float so that they appear in one line. But be careful to make ul wide enough! ! Come on, the html and css code is as follows (file name: index.html)
<!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>
<script src="animate.js"></script>
<script src="slideshow.js"></script>
<style>
body {
background-color: rgb(151, 147, 147);
}
* {
margin: 0;
padding: 0;
}
div {
overflow: hidden;
position: relative;
width: 500px;
height: 500px;
background-color: skyblue;
margin: 20px auto;
}
ul {
list-style: none;
}
.img {
width: 600%;
position: absolute;
left: 0;
}
li {
float: left;
}
img {
width: 500px;
height: 500px;
}
.yuan>li {
cursor: pointer;
width: 10px;
height: 10px;
background-color: rgb(190, 185, 185);
border-radius: 50%;
margin: 0 5px;
border: 1px solid rgb(119, 114, 114);
}
.yuan
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.yuan .color {
background-color: rgb(228, 135, 135);
}
a {
text-decoration: none;
color: black;
background-color: rgb(112, 111, 111);
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: none;
}
.left {
left: 0;
}
.right {
right: 0;
}
</style>
</head>
<body>
<div class="box">
<ul class="img">
<li><img src="images/1.webp" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.webp" alt=""></li>
<li><img src="images/4.webp" alt=""></li>
<li><img src="images/5.webp" alt=""></li>
</ul>
<a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="left"><</a>
<a href="JavaScript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
<ul class="yuan"></ul>
</div>
</body>
</html>
After writing it like this, you will have a basic outline. The next step is to make it move. Think about what can make the picture move. Is it the animation effect we have learned? All these places need to use slow-motion animation to achieve the effect of switching pictures. Because there are many js codes, you have to create a new js file to encapsulate the code! The following is the encapsulated js code (file name: slideshow.js)
window.addEventListener('load', function () {
var img = document.querySelector('.img');
var yuan = document.querySelector('.yuan');
var box = document.querySelector('.box');
var left = document.querySelector('.left');
var right = document.querySelector('.right');
var imgwidth = box.offsetWidth; //Get the width of the box (the width of the picture)
// Stop the automatic scrolling of pictures after the mouse is triggered box.addEventListener('mouseenter', function () {
left.style.display = 'block';
right.style.display = 'block';
clearInterval(timer);
})
// Leaving the mouse triggers the automatic scrolling of the picture and triggers it again box.addEventListener('mouseleave', function () {
left.style.display = 'none';
right.style.display = 'none';
timer = setInterval(function () {
right.click();
}, 2000)
})
// Add the following dots according to the picture for (var i = 0; i < img.children.length; i++) {
var li = document.createElement('li');
yuan.appendChild(li);
li.setAttribute('date-index', i);
li.addEventListener('click', function () {
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
this.className = 'color';
var index = this.getAttribute('date-index');
var imgwidth = box.offsetWidth;
// animate(obj,target,function(){})
animate(img, -index * imgwidth);
nums = index;
colors = index;
})
}
// By default, the first dot has color yuan.children[0].className = 'color';
var nums = 0;
var colors = 0;
// Copy the first image to the end to prepare for seamless scrolling var li = img.children[0].cloneNode(true);
img.appendChild(li);
var flag = true;
//Button on the right, switch to the next one, the dots change togetherright.addEventListener('click', function () {
if (flag) {
flag = false;
if (nums == img.children.length - 1) {
nums = 0;
img.style.left = 0;
}
nums++;
animate(img, -nums * imgwidth, function () {
flag = true;
});
colors++;
if (colors == yuan.children.length) {
colors = 0;
}
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[colors].className = 'color';
}
})
// The left button switches to the next one, and the dots change togetherleft.addEventListener('click', function () {
if (flag) {
flag = false;
if (nums == 0) {
nums = img.children.length - 1;
img.style.left = -nums * imgwidth + 'px';
}
nums--;
colors--;
animate(img, -nums * imgwidth, function () {
flag = true;
});
if (colors < 0) {
colors = yuan.children.length - 1;
}
// if (colors == 0) {
// colors = yuan.children.length;
// }
// colors--;
for (var j = 0; j < yuan.children.length; j++) {
yuan.children[j].className = '';
}
yuan.children[colors].className = 'color';
}
})
// Automatic scrolling without mouse passing over the image var timer = setInterval(function () {
right.click();
}, 2000)
})
Here comes the key point. How can we make it move without animation effects? I have encapsulated a js file separately so that I can directly reference it when writing other cases in the future. The code is as follows (file name: animate.js)
function animate(obj, target, callback) { // moving object (who moves), moving destination, callback function // first clear the previous timer, and only keep the current timer to execute clearInterval(obj.timer);
obj.timer = setInterval(function () {
// Write the step length to the timer var step = (target - obj.offsetLeft) / 10; // Step length formula: (target position - current position) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step); //Change the step length to an integer, do not use decimals, round up positive numbers and round down negative numbers if (obj.offsetLeft == target) {
clearInterval(obj.timer) //Stop the animation, essentially stop the timer if (callback) {
callback(); //Write the callback function to the end of the timer}
}
//The step length is a value that gradually decreases to achieve the effect of slowing down from fast to slow. obj.style.left = obj.offsetLeft + step + 'px';
},15)
}
Basically, everything is clearly written with comments, so you should be able to understand every step.
This is the end of this article about the implementation of JavaScript carousel. For more information about the implementation of carousel, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: 12 Javascript table controls (DataGrid) are sorted out
>>: A detailed introduction to HTML page loading and parsing process
Recommend
Detailed explanation of this pointing problem in JavaScript
Preface Believe me, as long as you remember the 7...
Detailed steps for installing the decompressed version of MySQL 5.7.20 (two methods)
I will explain the installation of MySQL under Wi...
Vue improves page response speed through lazy loading
Table of contents Overview What is lazy loading? ...
Detailed explanation of function classification and examples of this pointing in Javascript
Three ways to define functions in JS Let me expla...
Summary of frequently used commands for Linux file operations
0. New operation: mkdir abc #Create a new folder ...
Initial summary of the beginner's website building tutorial
After writing these six articles, I started to fee...
Vue integrates Tencent Map to implement API (with DEMO)
Table of contents Writing Background Project Desc...
Introduction to nesting rules of html tags
There are many XHTML tags: div, ul, li, dl, dt, d...
Use nexus as a private library to proxy docker to upload and download images
1. Nexus configuration 1. Create a docker proxy U...
Detailed graphic explanation of how to use svg in vue3+vite project
Today, in the practice of vue3+vite project, when...
Docker image creation Dockerfile and commit operations
Build the image There are two main ways to build ...
CSS3 category menu effect
The CSS3 category menu effects are as follows: HT...
How to recover accidentally deleted table data in MySQL (must read)
If there is a backup, it is very simple. You only...
CSS removes the background color of elements generated when they are clicked on the mobile terminal (recommended)
Add the following code to the CSS style of the el...
Example of how to upload a Docker image to a private repository
The image can be easily pushed directly to the Do...