JavaScript imitates Xiaomi carousel effect
|
This article is a self-written imitation of the Xiaomi carousel, which is a carousel by changing the transparency. As a novice, the writing may not be very good. If there is anything unreasonable, please point it out and correct it. All the codes are at the bottom. There are many repetitive writing methods. When I have time, I will encapsulate the repeated codes. About the transparency gradient animation effect For example, delayOpacity(OliArray[pre],0,-0.1); converts the transparency of the OliArray[pre] object to 0, with a speed of 0.1
function delayOpacity(obj,target,speed){
clearInterval(timer);
timer = setInterval(function(){
var old = getComputedStyle(obj,null)['opacity'];
var newVal = +old + +speed; //+ is to convert the string into number type if(parseInt(speed)>0 && newVal>=target){
newVal = 1;
}
if(parseInt(speed)<0 && newVal<=target){
newVal = 0;
}
obj.style.opacity = newVal; //Assign a new value to the transparency of the object each time to produce a gradient effect if (newVal==target) {
clearInterval(timer); //When the transparency value is the same as the transparency value in the target, turn off the timer}
},100);
}About the method of automatic rotation My carousel has four slides, but I wrote five pictures. The fifth one is the same as the first one. The purpose is to make the transparency conversion more reasonable and not suddenly change from the last one to the first one. The global variable next represents the slide that will be switched to, and pre represents the current slide.
function autoPlay(){
autoTimer = setInterval(function(){
next++;
pre++;
next %= OliArray.length;
pre %= OliArray.length;
if(pre==OliArray.length-1){
pre = 0;
}
for(let i=0;i<OliArray.length;i++){
if(i!=next){
OliArray[i].style.zIndex = 0;
/*Solve the problem that when clicking on the first few pictures, the automatic carousel does not switch.
Since the later pictures are displayed on top of the earlier pictures, if the third picture is played,
After clicking the first picture, when the carousel is automatically displayed, because the third picture is displayed above the second picture, there is no animation effect from the first to the second picture, and the picture always stops at the third picture. Therefore, the level of the picture to be displayed should be set to 1, and the levels of other pictures should be set to 0*/
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = ""; //When clicking, all other activated styles except the clicked origin are cleared}
}
OliArray[next].style.zIndex=1;
delayOpacity(OliArray[pre],0,-0.1); //Change the transparency of the previous image from 1 to 0
delayOpacity(OliArray[next],1,0.1); //Change the transparency of the image to be displayed from 0 to 1
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1; //When the last picture is displayed, switch to the first one immediately, rather than pretending to rotate to the first one, because the user's eyes are not so bright}
PointerArray[next].className = "active";
},3000);
}About click on the previous picture
prevBanner.onclick = function(){
//Clear the timer of the automatic carousel clearInterval(autoTimer);
pre = next; //Pre is the picture that was originally switched to next = next-1>=0? next-1:OliArray.length-2; //next is the previous picture to be switched for(let i=0;i<OliArray.length;i++){
if(i!=next){
OliArray[i].style.zIndex = 0;
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = "";
}
}
OliArray[next].style.zIndex = 1;
delayOpacity(OliArray[pre],0,-0.1);
delayOpacity(OliArray[next],1,0.1);
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1;
}
PointerArray[next].className = "active";
pre = next - 1;
//Turn on automatic carousel autoPlay();
}About Click Next It's a bit like the automatic carousel, but there is no timer (I think I can write it in a package function and change it later)
nextBanner.onclick = function(){
//Clear the timer of the automatic carousel clearInterval(autoTimer);
next++;
pre++;
next %= OliArray.length;
pre %= OliArray.length;
if(pre==OliArray.length-1){
pre = 0;
}
for(let i=0;i<OliArray.length;i++){
if(i!=next){
OliArray[i].style.zIndex = 0;
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = "";
}
}
OliArray[next].style.zIndex = 1;
delayOpacity(OliArray[pre],0,-0.1);
delayOpacity(OliArray[next],1,0.1);
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1;
}
PointerArray[next].className = "active";
//Turn on automatic carousel autoPlay();
}About clicking on a certain origin and switching to the image of that origin
for(let i=0;i<PointerArray.length;i++){
PointerArray[i].onclick = function(){
//Clear the timer of the automatic carousel clearInterval(autoTimer);
for(let j=0;j<OliArray.length;j++){
if(j!=i){
OliArray[j].style.zIndex = 0;
}
if(j!=next)
OliArray[j].style.opacity = 0;
if(j!=OliArray.length-1){
PointerArray[j].className = "";
}
}
OliArray[i].style.zIndex=1;
delayOpacity(OliArray[next],0,-0.1);
delayOpacity(OliArray[i],1,0.1);
PointerArray[i].className = "active";
pre = i - 1 == 0? OliArray.length-1:i-1;
next = i;
//Turn on automatic carousel autoPlay();
}
}HTML part
<div class="banner-wapper">
<div class="container">
<div class="banner">
<ul class="img-list">
<li>
<a href="#">
<img src="./img/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/1.jpg" alt="">
</a>
</li>
</ul>
<div class="pointer">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<div class="prev-next">
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
</div>
</div>CSS Part
.banner{
position: relative;
height: 460px;
}
.banner .img-list li{
position: absolute;
opacity: 0;
}
.banner-wapper .banner a img{
width: 1226px;
height: 460px;
vertical-align: top;
}
.banner .img-list li:nth-child(1){
opacity: 1;
}
.pointer{
z-index: 2;
position: absolute;
right: 30px;
bottom: 20px;
}
.pointer a{
float: left;
width: 6px;
height: 6px;
border: 2px rgba(255, 255, 255, 0.4) solid;
box-sizing: content-box;
margin: 0 4px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
}
.pointer a:hover,
.pointer .active{
border-color:rgba(0, 0, 0, 0.4);
background-color: rgba(255, 255, 255, 0.4);
}
.prev-next a{
width: 41px;
height: 69px;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
background-image: url(../img/icon-slides.png);
}
.prev-next .prev{
z-index: 2;
left: 234px;
background-position: -84px 50%;
}
.prev-next .prev:hover{
background-position: 0 0;
}
.prev-next .next{
z-index: 2;
right: 0;
background-position: -125px 50%;
}
.prev-next .next:hover{
background-position: -42px 50%;
}js part
window.onload = function(){
var Oul = document.getElementsByClassName("img-list")[0];
var OliArray = Oul.getElementsByTagName("li");
var pointer = document.getElementsByClassName("pointer")[0];
var PointerArray = pointer.getElementsByTagName("a");
var nextBanner = document.getElementsByClassName("next")[0];
var prevBanner = document.getElementsByClassName("prev")[0];
var timer,autoTimer, next = 0,pre = OliArray.length-1;
PointerArray[0].className = "active";
autoPlay();
// Click on the carousel for(let i=0;i<PointerArray.length;i++){
PointerArray[i].onclick = function(){
//Clear the timer of the automatic carousel clearInterval(autoTimer);
for(let j=0;j<OliArray.length;j++){
if(j!=i){
OliArray[j].style.zIndex = 0;
}
if(j!=next)
OliArray[j].style.opacity = 0;
if(j!=OliArray.length-1){
PointerArray[j].className = "";
}
}
// console.log(pre,next,i)
OliArray[i].style.zIndex=1;
delayOpacity(OliArray[next],0,-0.1);
delayOpacity(OliArray[i],1,0.1);
PointerArray[i].className = "active";
pre = i - 1 == 0? OliArray.length-1:i-1;
next = i;
//Turn on automatic carousel autoPlay();
}
}
// Click on the next banner nextBanner.onclick = function(){
//Clear the timer of the automatic carousel clearInterval(autoTimer);
next++;
pre++;
next %= OliArray.length;
pre %= OliArray.length;
if(pre==OliArray.length-1){
pre = 0;
}
for(let i=0;i<OliArray.length;i++){
if(i!=next){
OliArray[i].style.zIndex = 0;
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = "";
}
}
OliArray[next].style.zIndex = 1;
delayOpacity(OliArray[pre],0,-0.1);
delayOpacity(OliArray[next],1,0.1);
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1;
}
PointerArray[next].className = "active";
//Turn on automatic carousel autoPlay();
}
//Click on the previous banner prevBanner.onclick = function(){
//Clear the timer of the automatic carousel clearInterval(autoTimer);
pre = next;
next = next-1>=0? next-1:OliArray.length-2;
for(let i=0;i<OliArray.length;i++){
if(i!=next){
OliArray[i].style.zIndex = 0;
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = "";
}
}
OliArray[next].style.zIndex = 1;
delayOpacity(OliArray[pre],0,-0.1);
delayOpacity(OliArray[next],1,0.1);
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1;
}
PointerArray[next].className = "active";
pre = next - 1;
//Turn on automatic carousel autoPlay();
}
// Automatic carousel function autoPlay(){
autoTimer = setInterval(function(){
next++;
pre++;
next %= OliArray.length;
pre %= OliArray.length;
if(pre==OliArray.length-1){
pre = 0;
}
for(let i=0;i<OliArray.length;i++){
if(i!=next){
OliArray[i].style.zIndex = 0;
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = "";
}
}
OliArray[next].style.zIndex=1;
delayOpacity(OliArray[pre],0,-0.1);
delayOpacity(OliArray[next],1,0.1);
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1;
}
PointerArray[next].className = "active";
},3000);
}
function delayOpacity(obj,target,speed){
clearInterval(timer);
timer = setInterval(function(){
var old = getComputedStyle(obj,null)['opacity'];
// console.log(getComputedStyle(obj,null)['opacity'])
var newVal = +old + +speed;
// console.log(obj,newVal)
if(parseInt(speed)>0 && newVal>=target){
newVal = 1;
}
if(parseInt(speed)<0 && newVal<=target){
newVal = 0;
}
obj.style.opacity = newVal;
// console.log(getComputedStyle(obj,null)['opacity'])
if (newVal == target) {
clearInterval(timer);
}
},100);
}
}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:
|
<<: Solution for importing more data from MySQL into Hive
>>: Use mysql to record the http GET request data returned from the url
Recommend
Discussion on horizontal and vertical centering of elements in HTML
When we design a page, we often need to center th...
Summary of the most commonly used knowledge points about ES6 new features
Table of contents 1. Keywords 2. Deconstruction 3...
Mysql database design three paradigm examples analysis
Three Paradigms 1NF: Fields are inseparable; 2NF:...
Solve the problem of VScode configuration remote debugging Linux program
Let's take a look at the problem of VScode re...
CSS3 click button circular progress tick effect implementation code
Table of contents 8. CSS3 click button circular p...
Detailed analysis of javascript data proxy and events
Table of contents Data Brokers and Events Review ...
Summary of seven sorting algorithms implemented in JavaScript (recommended!)
Table of contents Preface Bubble Sort Basic Algor...
How to configure https for nginx in docker
Websites without https support will gradually be ...
js native carousel plug-in production
This article shares the specific code for the js ...
Docker FAQ
Docker only maps ports to IPv6 but not to IPv4 St...
Problem analysis of using idea to build springboot initializer server
Problem Description Recently, when I was building...
How to solve the problem that the project in eclipse cannot be added to tomcat
1. Right-click the project and select properties ...
Detailed steps for using AES.js in Vue
Use of AES encryption Data transmission encryptio...
Briefly talk about mysql left join inner join
Preface I have been busy developing a cold chain ...
Implementing add, delete, modify and query operations on MySQL based on sqlalchemy
Demand scenario: The boss asked me to use the cra...