Effect of JavaScript imitation millet carousel map
- 2021-11-29 06:08:37
- OfStack
This article is his own imitation of millet carousel chart writing, through the transparency of the change of carousel, novice, writing may not be very good, there is any unreasonable situation, hope to put forward, correct, all the code placed at the bottom
There are many repetitions in writing. When I am free, I encapsulate the repeated code under 1
About the animation effect of transparency gradient
For example, delayOpacity (OliArray [pre], 0,-0.1); Is to convert the transparency of the OliArray [pre] object to 0 at 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 a string into a number Type
if(parseInt(speed)>0 && newVal>=target){
newVal = 1;
}
if(parseInt(speed)<0 && newVal<=target){
newVal = 0;
}
obj.style.opacity = newVal;// Each time a new value is assigned to the transparency of the object, a gradient effect is produced
if(newVal==target){
clearInterval(timer);// When the value of transparency and the value of transparency in the target 1 Turn off the timer when the
}
},100);
}On the method of automatic carousel
My carousel has 4 pictures, but I have written 5 pictures. The fifth and first pictures are the same, so that the transparency conversion is reasonable and will not suddenly change from the last one to the first one
The global variable next represents the one to be switched by the carousel, and pre represents the current 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;
/* Solve the problem that when clicking the first few pictures, there is no switching effect after automatic carousel,
Because the following picture shows the effect above the previous picture , So if you play to the first 3 When taking a picture,
Click the number 1 After a picture, it will be automatically carousel because of the first 3 The display of the picture is in the 2 Above a picture
So from the first 1 Zhang Zhidi 2 Zhang, there is no animation effect, and the picture 1 Stop straight at the first 3 Zhang
So set the level of the picture to be displayed to 1 The level of other pictures is set to 0*/
}
if(i!=pre)
OliArray[i].style.opacity = 0;
if(i!=OliArray.length-1){
PointerArray[i].className = ""; // This is when clicking, except the origin of clicking, other activated styles are emptied
}
}
OliArray[next].style.zIndex=1;
delayOpacity(OliArray[pre],0,-0.1);// Will go up 1 The transparency of Zhang is determined by 1 Become 0
delayOpacity(OliArray[next],1,0.1);// The transparency of the picture to be displayed is determined by the 0 Become 1
if(next==OliArray.length-1) {
next = 0;
OliArray[next].style.opacity = 1;// To the end 1 Immediately switch to the 1 Zhang, as opposed to pretending to rotate to the first 1 It's open, because the user's eyes are not so bright
}
PointerArray[next].className = "active";
},3000);
}About clicking on one picture
prevBanner.onclick = function(){
// Empty the timer of automatic carousel
clearInterval(autoTimer);
pre = next;// At this time pre It's the picture you switched to
next = next-1>=0? next-1:OliArray.length-2;//next Is to go up 1 Zhang , Picture to switch
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 clicking on the next one
It is a bit like automatic carousel, but there is no timer (here I think I can encapsulate the function to write, and change it to 1 later)
nextBanner.onclick = function(){
// Empty the timer of 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, switch to the picture of the origin
for(let i=0;i<PointerArray.length;i++){
PointerArray[i].onclick = function(){
// Empty the timer of 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 carousel
for(let i=0;i<PointerArray.length;i++){
PointerArray[i].onclick = function(){
// Empty the timer of 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 under 1 Zhang
nextBanner.onclick = function(){
// Empty the timer of 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 1 Zhang
prevBanner.onclick = function(){
// Empty the timer of 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);
}
}