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
How to use a game controller in CocosCreator
Table of contents 1. Scene layout 2. Add a handle...
CSS fixes the container level (div...) tag in one position (on the far right of the page)
The code looks like this: .process{ border:1px so...
Docker deployment RabbitMQ container implementation process analysis
1. Pull the image First, execute the following co...
3 simple ways to achieve carousel effects with JS
This article shares 3 methods to achieve the spec...
How to find out uncommitted transaction information in MySQL
A while ago, I wrote a blog post titled "Can...
Detailed explanation of gcc command usage under Linux system
Table of contents 1. Preprocessing 2. Compilation...
Use Rem layout to achieve adaptive
I have written an article about mobile adaptation...
How to configure VMware multi-node environment
This tutorial uses CentOS 7 64-bit. Allocate 2GB ...
How to use yum to configure lnmp environment in CentOS7.6 system
1. Installation version details Server: MariaDB S...
Solution to Docker image downloading too slowly
Docker image download is stuck or too slow I sear...
Install three or more tomcats under Linux system (detailed steps)
If you want to install multiple tomcats, you must...
Basic understanding and use of HTML select option
Detailed explanation of HTML (select option) in ja...
A brief introduction to bionic design in Internet web design
When it comes to bionic design, many people will t...
jQuery implements simple pop-up window effect
This article shares the specific code of jQuery t...
MYSQL METADATA LOCK (MDL LOCK) MDL lock problem analysis
1. Introduction MDL lock in MYSQL has always been...