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 more reasonable creation rules for MySQL string indexes
Preface Regarding the use of MySQL indexes, we ha...
Docker executes a command in a container outside the container
Sometimes we want to execute a command in a conta...
Analysis of the principle of Vue nextTick
Table of contents Event Loop miscroTask (microtas...
Implement QR code scanning function through Vue
hint This plug-in can only be accessed under the ...
About scroll bar in HTML/removing scroll bar
1. The color of the scroll bar under xhtml In the ...
Detailed explanation of the difference and application of CSS3 filter:drop-shadow filter and box-shadow
To use standard CSS3 to achieve the shadow effect...
The phenomenon of margin-top collapse and the specific solution
What is margin-top collapse Margin-top collapse i...
A brief discussion on how to use slots in Vue
How to define and use: Use the slot tag definitio...
How to use Navicat to operate MySQL
Table of contents Preface: 1. Introduction to Nav...
Mariadb remote login configuration and problem solving
Preface: The installation process will not be des...
How to implement form validation in Vue
1. Installation and use First, install it in your...
The webpage cannot be opened because the div element lacks a closing tag
At first I thought it was a speed issue, so I late...
Record the whole process of MySQL master-slave configuration based on Linux
mysql master-slave configuration 1. Preparation H...
Detailed explanation of Javascript closures and applications
Table of contents Preface 1. What is a closure? 1...
How to change the default character set of MySQL to utf8 on MAC
1. Check the character set of the default install...