It's about this son:
First of all, let's make a simple layout (emm... Let's do something about it, anyway, it's mainly made up of js)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Carousel chart</title> 8 <script src="js/index.js"></script> 9 <style> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 ul, li { 15 list-style: none; 16 } 17 .wrap { 18 margin: 0 auto; 19 width: 1050px; 20 } 21 .slider { 22 position: relative; 23 margin: 50px auto; 24 height: 400px; 25 } 26 .slider li { 27 position: absolute; 28 } 29 .slider li img { 30 width: 100%; 31 } 32 .slider .arrow-l, 33 .slider .arrow-r{ 34 position: absolute; 35 top: 0; 36 display: none; 37 width: 80px; 38 height: 400px; 39 background-size: 80px; 40 cursor: pointer; 41 opacity: 0.8; 42 z-index: 99; 43 } 44 .arrow-r { 45 right: 80px; 46 background: url(img/next.png) no-repeat 0; 47 } 48 .arrow-l { 49 left: 80px; 50 background: url(img/prev.png) no-repeat 0; 51 } 52 </style> 53 </head> 54 <body> 55 <div class="wrap"> 56 <div class="slider"> 57 <ul> 58 <li><img src="img/img1.jpg" alt=""></li> 59 <li><img src="img/img2.jpg" alt=""></li> 60 <li><img src="img/img3.jpg" alt=""></li> 61 <li><img src="img/img4.jpg" alt=""></li> 62 <li><img src="img/img5.jpg" alt=""></li> 63 </ul> 64 <div class="arrows"> 65 <i class="arrow arrow-l"></i> 66 <i class="arrow arrow-r"></i> 67 </div> 68 </div> 69 </div> 70 </body> 71 </html>
Down to the main part
In fact, it is mainly the encapsulation of animation functions and the change of arrays
The last blog of the blogger wrote: Encapsulation of animation function in native JS . No repetition here~
Store image related styles (size, orientation, transparency, etc.) in the arr array.
When the user clicks the left and right arrows, make the array change accordingly (if you click the right arrow, delete the last element of the array and add it to the front; if you click the left arrow, delete the first element of the array and add it to the last), change the complete group and call the move() function (let the picture rotate)
The detailed code is as follows
1 window.addEventListener("load", function() { 2 var arr = [ 3 { // 1 4 width: 450, 5 top: 60, 6 left: 0, 7 opacity: 40, 8 zIndex: 2 9 }, 10 { // 2 11 width: 550, 12 top: 30, 13 left: 100, 14 opacity: 70, 15 zIndex: 3 16 }, 17 { // 3 Middle picture 18 width: 650, 19 top: 0, 20 left: 200, 21 opacity: 100, 22 zIndex: 4 23 }, 24 { // 4 25 width: 550, 26 top: 30, 27 left: 400, 28 opacity: 70, 29 zIndex: 3 30 }, 31 { // 5 32 width: 450, 33 top: 60, 34 left: 600, 35 opacity: 40, 36 zIndex: 2 37 } 38 ]; 39 var slider = document.querySelector(".slider"); 40 var lis = slider.querySelectorAll("li"); 41 var arrow_l = slider.querySelector(".arrow-l"); 42 var arrow_r = slider.querySelector(".arrow-r"); 43 44 // Mouse in out arrow show hide 45 slider.addEventListener("mouseover", function() { 46 arrow_l.style.display = 'block'; 47 arrow_r.style.display = 'block'; 48 }); 49 slider.addEventListener("mouseout", function() { 50 arrow_l.style.display = 'none'; 51 arrow_r.style.display = 'none'; 52 }); 53 54 var flag = true; // flag The throttle valve is generated to solve the problem of clicking too fast bug 55 move(); // Call it first to render the page when you first open the browser 56 57 // Click the left and right arrows to rotate the pictures 58 arrow_r.addEventListener("click", function() { 59 if(flag) { 60 flag = false; // Close the throttle and wait until the animation is over before continuing to click 61 arr.unshift(arr.pop()); // Delete the element at the last edge of the array and add it to the first edge 62 move(); // Rotation picture 63 } 64 }); 65 arrow_l.addEventListener("click", function() { 66 if(flag) { 67 flag = false; 68 arr.push(arr.shift()); // Delete the element at the front of the array and add it to the last edge 69 move(); 70 } 71 }); 72 73 // Animate each picture 74 function move() { 75 for(var i = 0; i < lis.length; i++) { 76 animate(lis[i], arr[i], function() { 77 flag = true; // Callback function, when the animation is finished, open the throttle 78 }); 79 } 80 } 81 // Animation function 82 function animate(obj, json, callback) { 83 clearInterval(obj.timer); 84 obj.timer = setInterval(function() { 85 var bool = true; 86 for(var attr in json) { 87 var icur = 0; 88 if(attr == 'opacity') { 89 icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); 90 } else { 91 icur = parseInt(getStyle(obj, attr)); 92 } 93 var speed = (json[attr] - icur) / 10; 94 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 95 if(icur != json[attr]) { 96 bool = false; 97 } 98 if(attr == 'opacity') { 99 obj.style.filter = 'alpha(opacity = '+ (icur + speed) +')'; 100 obj.style.opacity = (icur + speed) / 100; 101 } else if(attr == 'zIndex') { 102 obj.style.zIndex = json[attr]; 103 } else { 104 obj.style[attr] = icur + speed + 'px'; 105 } 106 } 107 if(bool) { 108 clearInterval(obj.timer); 109 callback && callback(); 110 } 111 },15); 112 } 113 // Get attribute function 114 function getStyle(obj, attr) { 115 if(obj.currentStyle){ //IE Browser 116 return obj.currentStyle[attr]; 117 }else{ //chrome,firefox Other browsers 118 return getComputedStyle(obj,null)[attr]; 119 } 120 } 121 });