Functional description:
Automatically rotate pictures seamlessly, with small dots at the bottom consistent with the pictures; move the rotate map around your finger, move it more than 50px to play the next (or previous), and bounce back when it is less than 50px
Specific function implementation:
1. Timer Auto-Roll Pictures
First declare an index=0 to store the picture index;
Add a timer that is called every two seconds and an index that is added to every timer call (pictures are played once).
Pictures are rotated through the transform and transition attributes.
1 var index = 0; 2 var timer = setInterval(function() { 3 index++; 4 var translatex = -index * w; // ul Distance to move 5 ul.style.transition = 'all .4s'; 6 ul.style.transform = 'translateX(' + translatex + 'px)'; 7 }, 2000);
2. Seamless rotation and consistency of dots and pictures
Bind a listener function to ul (the entire ul is moved each time a relay is played) and execute at the end of the transition;
To determine if the index index is greater than or equal to 3, if yes, it has been played to the last page, let index=0 and remove the transition effect, and quickly return to the first page;
Determining whether the index is less than 0 or less indicates that the user is sliding forward at first, leaving index=2 and removing the transition effect, and moving quickly to the last page.
Start with the bottom dot (add classes to the current li, delete other lis)
1 ul.addEventListener('transitionend', function() { 2 if(index >= 3) { 3 index = 0; 4 ul.style.transition = ''; // Remove Transition Effect 5 var translatex = -index * w; 6 ul.style.transform = 'translateX(' + translatex + 'px)'; 7 } else if(index < 0) { 8 index = 2; 9 ul.style.transition = ''; 10 var translatex = -index * w; 11 ul.style.transform = 'translateX(' + translatex + 'px)'; 12 } 13 // Start with small bottom dots 14 // Will have current Class li Remove this class 15 ol.querySelector('.current').classList.remove('current'); 16 // Give Current li Add to current class 17 ol.children[index].classList.add('current'); 18 })
3. To follow a finger movement, first declare several variables to store the initial position of the finger, whether the finger moves on the screen, and how far the finger moves.
var startX = 0; // Finger initial position var moveX = 0; // The distance your finger moves on the screen var flag = false; // Record if the user moved his finger
Bind a finger touch event to ul, record the initial position of the finger touch, and clear the timer (do not let it rotate automatically)
1 ul.addEventListener('touchstart', function(e) { 2 startX = e.targetTouches[0].pageX; // Initial touch position of finger (left and right, record only) x That's all) 3 clearInterval(timer); 4 })
Bind Finger Move Event to ul
1 ul.addEventListener('touchmove', function(e) { 2 moveX = e.targetTouches[0].pageX - startX; // The distance your finger moves 3 var translatex = -index * w + moveX; 4 ul.style.transition = 'none'; 5 ul.style.transform = 'translateX(' + translatex + 'px)'; 6 flag = true; // Move your finger, move it flag Change to true 7 e.preventDefault(); // Default behavior to prevent screen scrolling (to prevent the screen from scrolling up and down when the user moves the broadcast map) 8 })
4. Make a track of the picture after your finger leaves to see if the user has moved the picture, flag is true to judge:
1) Pictures with finger movement distance greater than 50px Play previous or next picture; 2) Pictures with finger movement distance less than 50px bounce back;
Change flag to false when finished and turn on the timer again to let it continue auto-rotation
1 ul.addEventListener('touchend', function(e) { 2 if(flag) { // flag==true(When moving pictures) 3 if(Math.abs(moveX) > 50) { // Slide up one or next when the moving distance is greater than 50 ( moveX Positive or negative, Math.abs()Take absolute value) 4 if(moveX > 0) { // Right Slide Picture Index greater than 0 minus one 5 index--; 6 } else { // Left Slide Picture Index Less Than 0 Plus One 7 index++; 8 } 9 var translatex = -index * w; 10 ul.style.transition = 'all .3s'; 11 ul.style.transform = 'translateX(' + translatex + 'px)'; 12 } else { // Less than 50 px Bounce back 13 var translatex = -index * w; 14 ul.style.transition = 'all .1s'; 15 ul.style.transform = 'translateX(' + translatex + 'px)'; 16 } 17 } 18 // After the completion of the flag Change to false，And turn on the timer to start the picture rotation 19 flag = false; 20 // Clean and turn on, ensuring only one timer is running (otherwise there will be) bug) 21 clearInterval(timer); 22 timer = setInterval(function() { 23 index++; 24 var translatex = -index * w; 25 ul.style.transition = 'all .4s'; 26 ul.style.transform = 'translateX(' + translatex + 'px)'; 27 }, 2000); 28 })
Note: Functions can continue to be optimized, such as adding pictures dynamically, adding small dots at the bottom dynamically, etc.You can refer to my last article for details. JavaScript for Dynamic Roadmap Effect .
The implementation code is as follows:
HTML code:
1 <div class="focus"> 2 <ul> 3 <!-- Users may start with a previous slide, so add one more focus3 --> 4 <li><img src="images/focus3.jpg" alt=""></li> 5 <li><img src="images/focus1.jpg" alt=""></li> 6 <li><img src="images/focus2.jpg" alt=""></li> 7 <li><img src="images/focus3.jpg" alt=""></li> 8 <li><img src="images/focus1.jpg" alt=""></li> 9 </ul> 10 <ol> 11 <li class="current"></li> 12 <li></li> 13 <li></li> 14 </ol> 15 </div>
CSS code:
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 body { 6 margin: 0 auto; 7 max-width: 540px; 8 min-width: 320px; 9 background: #f6f6f6; 10 } 11 .focus { 12 width: 100%; 13 position: relative; 14 margin-top: 50px; 15 overflow: hidden; 16 } 17 .focus ul { 18 width: 500%; 19 overflow: hidden; 20 margin-left: -100%; 21 } 22 .focus ul li { 23 float: left; 24 width: 20%; 25 } 26 .focus ul img { 27 width: 100%; 28 } 29 .focus ol { 30 position: absolute; 31 bottom: 5px; 32 right: 5px; 33 34 } 35 .focus ol li { 36 width: 5px; 37 height: 5px; 38 display: inline-block; 39 background-color: #fff; 40 border-radius: 4px; 41 transition: all .2s; 42 } 43 .focus .current { 44 width: 15px; 45 }
JavaScript code:
1 window.addEventListener('load', function() { 2 var focus = document.querySelector('.focus'); 3 var ul = focus.children[0]; // Obtain focus The first child, that is ul 4 var ol = focus.children[1]; 5 var w = focus.offsetWidth; // Obtain focus Width 6 var index = 0; // Used to record picture index 7 var timer = setInterval(function() { // Add timer, called once in two seconds 8 index++; // Picture Index Number per Call (Roadcast)+1 9 var translatex = -index * w; // ul Distance to move 10 ul.style.transition = 'all .4s'; // Add transition properties ( css3 Attributes of) 11 ul.style.transform = 'translateX(' + translatex + 'px)'; 12 }, 2000); 13 // to ul Bind listener functions (the whole is moved each time a relay is played ul) End of transition ( transitionend)Execute on time 14 ul.addEventListener('transitionend', function() { 15 if(index >= 3) { // Indexes > 3 Instructions have been rotated to the last one 16 index = 0; 17 // Remove transition effect and quickly return to first 18 ul.style.transition = ''; 19 var translatex = -index * w; 20 ul.style.transform = 'translateX(' + translatex + 'px)'; 21 } else if(index < 0) { // Indexes < 0 Indicates that the user started by sliding forward 22 index = 2; 23 ul.style.transition = ''; 24 var translatex = -index * w; 25 ul.style.transform = 'translateX(' + translatex + 'px)'; 26 } 27 // Start with small bottom dots 28 // Will have current Class li Remove this class 29 ol.querySelector('.current').classList.remove('current'); 30 // Give Current li Add to current class 31 ol.children[index].classList.add('current'); 32 }) 33 // Finger Slide Wheel Map 34 var startX = 0; // Used to store the initial position of the finger 35 var moveX = 0; // Stores the distance your finger moves on the screen 36 var flag = false; // Record whether the user moved his finger on the map 37 // to ul Bind Finger Touch Event 38 ul.addEventListener('touchstart', function(e) { 39 startX = e.targetTouches[0].pageX; // Initial touch position of finger (left and right, record only) x That's all) 40 clearInterval(timer); // Clear the timer when your finger touches the screen (do not let it rotate automatically) 41 }) 42 // to ul Bind Finger Move Event 43 ul.addEventListener('touchmove', function(e) { 44 moveX = e.targetTouches[0].pageX - startX; // The distance your finger moves 45 var translatex = -index * w + moveX; 46 ul.style.transition = 'none'; 47 ul.style.transform = 'translateX(' + translatex + 'px)'; 48 flag = true; // Move your finger, move it flag Change to true 49 e.preventDefault(); // Default behavior to prevent screen scrolling 50 }) 51 // to ul Bind Finger Leave Event 52 ul.addEventListener('touchend', function(e) { 53 if(flag) { // flag==true(When moving pictures) 54 if(Math.abs(moveX) > 50) { // Slide up one or next when the moving distance is greater than 50 ( moveX Positive or negative, Math.abs()Take absolute value) 55 if(moveX > 0) { // Right Slide Picture Index greater than 0 minus one 56 index--; 57 } else { // Left Slide Picture Index Less Than 0 Plus One 58 index++; 59 } 60 var translatex = -index * w; 61 ul.style.transition = 'all .3s'; 62 ul.style.transform = 'translateX(' + translatex + 'px)'; 63 } else { // Less than 50 px Bounce back 64 var translatex = -index * w; 65 ul.style.transition = 'all .1s'; 66 ul.style.transform = 'translateX(' + translatex + 'px)'; 67 } 68 } 69 // After the completion of the flag Change to false，And turn on the timer to start the picture rotation 70 flag = false; 71 // Clean and turn on, ensuring only one timer is running (otherwise there will be) bug) 72 clearInterval(timer); 73 timer = setInterval(function() { 74 index++; 75 var translatex = -index * w; 76 ul.style.transition = 'all .4s'; 77 ul.style.transform = 'translateX(' + translatex + 'px)'; 78 }, 2000); 79 }) 80 })