js to create a carousel effect
|
I think the carousel is a relatively important point in front-end development, because it contains a lot of native js knowledge points. The following is the process of learning to make a carousel difficulty: 1. How to make the corresponding circles and pictures below automatically generated dynamically Effect:
Code:
<!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>
<style>
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: white;
line-height: 50px;
text-align: center;
}
li {
list-style: none;
}
.tb-promo {
position: relative;
width: 700px;
height: 300px;
margin: auto;
overflow: hidden;
}
.tb-promo .imgg {
position: absolute;
top: 0;
left: 0;
width: 3000px;
}
.tb-promo .imgg li {
float: left;
}
.tb-promo .imgg li img {
width: 700px;
height: 300px;
}
.tb-promo .prev {
display: none;
position: absolute;
top: 125px;
left: 0;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
z-index: 999;
}
.tb-promo .prev:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.tb-promo .next {
display: none;
position: absolute;
top: 125px;
right: 0;
width: 25px;
height: 50px;
background-color: rgba(0, 0, 0, 0.2);
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
z-index: 999;
}
.tb-promo .next:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.tb-promo .promo-nav {
position: absolute;
top: 270px;
left: 50%;
margin-left: -40px;
height: 25px;
}
.tb-promo .promo-nav li {
float: left;
width: 16px;
height: 16px;
background-color: white;
border-radius: 8px;
margin: 4px;
}
.tb-promo .promo-nav .one {
background-color: tomato;
}
</style>
</head>
<body>
<div class="tb-promo">
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<ul class="imgg">
<li><img src="./61.jpeg" alt=""></li>
<li><img src="./62.jpeg" alt=""></li>
<li><img src="./63.jpeg" alt=""></li>
</ul>
<ol class="promo-nav">
</ol>
</div>
<script>
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var tbpromo = document.querySelector('.tb-promo');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
//Animation function function animate(obj, target) {
clearInterval(obj.timer); //Call to prevent multiple clicks obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step); //Round positive and negative values if (obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 10)
}
//Generate dynamic navigation circle var tbpromWidth = tbpromo.offsetWidth;
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li');
ol.appendChild(li);
//Record index number through custom attribute li.setAttribute('index', i);
//Exclusive idea to write circle color change li.addEventListener('click', function () {
// Clear all circle colors for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'one';
var index = this.getAttribute('index');
//Click li and assign the index number of li to the control variable num = index;
circle=index;
animate(ul, -index * tbpromWidth);
})
ol.children[0].className = 'one';
}
//Clone the first picture li and put it at the end for seamless switching var frist = ul.children[0].cloneNode(true);
ul.appendChild(frist);
//Hide and display the next and previous pages tbpromo.addEventListener('mouseenter', function () {
prev.style.display = 'block';
next.style.display = 'block';
clearInterval(timer);
timer=0; // clear the timer variable })
tbpromo.addEventListener('mouseleave', function () {
prev.style.display = 'none';
next.style.display = 'none';
timer = setInterval(function () {
next.click(); //manually call the click event}, 1500)
})
//next prev animation var num = 0;
//Control circle var circle = 0;
//Throttle valve variable var flag=true;
//Next page next.addEventListener('click', function () {
//The last one is to judge ul and restore left to 0
if (num == (ul.children.length - 1)) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * tbpromWidth);
circle++;
if (circle == 3) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'one';
})
//Previous page prev.addEventListener('click', function () {
if (num == 0) {
num = ul.children.length-1;
ul.style.left = -num*tbpromWidth+'px';
}
else {
num--;
animate(ul, -num * tbpromWidth);
circle--;
if (circle <0) {
circle = 2;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'one';
}
})
//Automatic playback var timer = setInterval (function () {
next.click(); //manually call the click event}, 2000)
</script>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Docker-compose installation db2 database operation
>>: How to install redis in docker and set password and connect
Recommend
Tomcat maxPostSize setting implementation process analysis
1. Why set maxPostSize? The tomcat container has ...
Web designers also need to learn web coding
Often, after a web design is completed, the desig...
How to use position:sticky to perfectly solve the problem of small programs adhering to the ceiling
Recently, the client of a project insisted on hav...
HTML head structure
The following introduces the commonly used head s...
JavaScript programming through Matlab centroid algorithm positioning learning
Table of contents Matlab Centroid Algorithm As a ...
Summary of the pitfalls of using primary keys and rowids in MySQL
Preface We may have heard of the concept of rowid...
Implementation of CSS border length control function
In the past, when I needed the border length to b...
How to use boost.python to call c++ dynamic library in linux
Preface Recently I started using robot framework ...
Detailed explanation of long transaction examples in MySQL
Preface: The "Getting Started with MySQL&quo...
MySQL loop inserts tens of millions of data
1. Create a test table CREATE TABLE `mysql_genara...
Function overloading in TypeScript
Table of contents 1. Function signature 2. Functi...
How to customize more beautiful link prompt effect with CSS
Suggestion: Handwriting code as much as possible c...
JavaScript array reduce() method syntax and example analysis
Preface The reduce() method receives a function a...
Node+socket realizes simple chat room function
This article shares the specific code of node+soc...
Realize map aggregation and scattering effects based on vue+openlayer
Table of contents Preface: Result: 1. Polymerizat...