Probably this sub-sub-:
First, let's look at a simple layout (emm ... just get it, anyway, is mainly used to the whole 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>旋转木马轮播图</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=""></ <61> ><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>
Below to enter the main part
In fact, the package is mainly a function of animation as well as changes to the array
Comment animated part of the function, bloggers write on a blog: native JS package to achieve animation function . It will not be repeated here -
The picture related style (size, position, transparency, etc.) is stored in the array arr.
When the user clicks the left and right arrows, so that the array corresponding changes (if you click the right arrow to delete an array that last element, add it to most front; If you click on the left arrow, delete the most in front of the array of elements, add it to the final side), change the complete array and then call it move () function (let the picture carousel)
Following detailed code
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 中间图片 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 // 鼠标移入移出箭头显示隐藏 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 = to true ; // Flag throttle in order to solve the excessive clicks generated bug 55 the Move (); // first call about, just open your browser to when the page is rendered 56 57 // click the left and right arrows rotate the picture 58 arrow_r.addEventListener ( "the click", function () { 59 IF (Flag) { 60 Flag = false ; // close the throttle to wait until the movie is over to continue click operation 61 arr.unshift (arr.pop ()); // array side of the last elements deleted, added to the front of most 62 Move (); // rotate image 63 is } 64 }); 65 arrow_l.addEventListener ( "the Click", function () { 66 IF (In Flag) { 67 In Flag = to false ; 68 arr.push (arr.shift ()) ; // will remove most front array of elements, added to the end edge 69 Move (); 70 } 71 is }); 72 73 is // so that each picture Animate 74 function Move () { 75 for ( var I = 0; i <lis.length; i ++) { 76 Animate (LIS [I], ARR [I], function () { 77 In Flag = to true ; // callback function, then when the throttle opening animation execution Ends 78 }); 79 } 80 } 81 // animation functions 82 function Animate (obj, JSON, the callback) { 83 the clearInterval (obj.timer); 84 obj.timer = the setInterval ( function () { 85 var BOOL = to 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 the clearInterval (obj.timer); 109 the callback && the callback (); 110 } 111 }, 15 ); 112 } 113 // Get property function 114 function the getStyle (obj, attr) { 115 IF (obj.currentStyle) { // IEs browser 1 16 return obj.currentStyle [attr]; 117 } the else { // Chrome, and the like Firefox browser 118 return getComputedStyle(obj,null)[attr]; 119 } 120 } 121 });